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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现高级检索功能
May 28 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
软件测试英文面试题
2012/10/14 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
优秀技术工人先进材料
2014/02/17 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
小班幼儿评语大全
2014/04/30 职场文书
个人课题方案
2014/05/08 职场文书
法人授权委托书
2014/09/16 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
政协会议宣传标语
2014/10/09 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android