jQuery Ajax使用FormData上传文件和其他数据后端web.py获取


Posted in jQuery onJune 11, 2017

XMLHttpRequest Level 2 添加了一个新的接口——FormData。与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。

jQuery 2.0+的版本支持FormData

方法一:使用<form>表单初始化FormData对象方式上传文件

•前端(JQuery):

<form enctype="multipart/form-data">
  <input type="file" name="myfile" onchange="loadFile(this.files[0])">
</form>
<script>
  function loadFile(file){
    var formdata = new FormData($$('form')[0]);
    $.ajax({
      url: 'jobs/add',
      type: 'POST',
      datatype: 'json',
      data: formdata,
      cache:false,
      traditional: true,
      contentType: false,
      processData: false,
      success: function (data) {},
      error: function () {}
    });
  }
</script>

•后台(web.py):

class Add:
  def POST(self):
    i = web.input(myfile={})
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

 注意:

1.<form>的enctype属性需要设置为“multipart/form-data”

2.$.ajax中processData、contentType和cache需要设置为false

3.后端通过web.input获取文件的字段名,同前端指定的input标签的name属性

方法二√:不用<form>,使用FormData对象添加字段方式上传文件

有时,我们并不想用

标签,而且通过ajax传给后端的并不只有文件,可能还有其他的键值对,这时就可以用这个方法

•前端(JQuery):

<input type="file" onchange="loadFile(this.files[0])" />
function loadFile(file){
  container.fd = new FormData();
  container.fd.append('myfile',file);
  container.fd.append('otherkey',othervalue);
  $.ajax({
    url: 'jobs/add',
    type: 'POST',
    datatype: 'json',
    data: fd,
    cache:false,
    traditional: true,
    contentType: false,
    processData: false,
    success: function (data) {},
    error: function () {}
  });
}

•后台(web.py):

class Add:
  def POST(self):
    i = web.input(myfile={}, otherkey='')
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

 注意:

1.没有<form>标签(有了也不错)

2.append()方法的第二个参数是文件对象,在html中已经通过loadFile方法的参数传过来

3.后端通过web.input获取文件的字段名,同前端append()方法的第一个参数

4.因为通过web.input获取的值都是字符串,如果除文件以外的键值对传过来是null,会自动转化为字符串'null'。这点处理的时候需要注意

以上所述是小编给大家介绍的jQuery Ajax使用FormData上传文件和其他数据后端web.py获取,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
jQuery正则验证注册页面经典实例
Jun 10 #jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
jQuery为某个div加入行样式
Jun 09 #jQuery
You might like
PHP自定义大小验证码的方法详解
2013/06/07 PHP
深入php处理整数函数的详解
2013/06/09 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
CI框架附属类用法分析
2018/12/26 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python传递参数方式小结
2015/04/17 Python
python2.7安装图文教程
2018/03/13 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
python代码区分大小写吗
2020/06/17 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
机器人总动员观后感
2015/06/09 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
python中数组和列表的简单实例
2022/03/25 Python