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和ajax代替iframe的方法(详解)
Apr 12 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现动态向上滚动
Dec 21 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你的验证码安全码?
2007/01/02 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
小程序实现tab标签页
2020/11/16 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
python Pexpect模块的使用
2020/12/25 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
电台实习生求职信
2014/02/25 职场文书
《赶海》教学反思
2014/04/20 职场文书
化工见习报告范文
2014/10/31 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫