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-data的三种用法
Apr 18 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现开关灯效果
Aug 02 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
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
python处理二进制数据的方法
2015/06/03 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
python 实现批量图片识别并翻译
2020/11/02 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
品质主管岗位职责
2014/03/16 职场文书
找工作求职信
2014/07/07 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
党员民主评议总结
2014/10/20 职场文书