当前位置：主页 > jquery教程 >

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

  • 更新时间：2020-07-06 10:41:31
  • 编辑：崔绮艳

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 Ajax 全局调用封装

    这篇文章主要介绍了jquery Ajax 全局调用封装实例详解的相关资料,需要的朋友可以参考下

    发布时间：2020-03-12

  • jQuery Ajax 全局调用封装代码

    这篇文章主要介绍了jQuery Ajax 全局调用封装实例代码详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下

    发布时间：2020-04-26

  • 为jquery的ajax请求添加超时timeout时间的操作方法实例详解

    这篇文章主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法，文中通过一段简单的代码给大家介绍jquery ajax超时设置方法，感兴趣的朋友跟随脚本之家小编一起看看吧

    发布时间：2020-01-22

  • jQuery的ajax封装方法实例内容

    AJAX 是一种用于创建快速动态网页的技术。这篇文章主要介绍了基于jQuery的ajax方法封装的相关资料,需要的朋友可以参考下

    发布时间：2020-05-21

  • jquery Ajax解析XML数据代码实例

    本篇文章主要是对Jquery Ajax解析XML数据(同步及异步调用)的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    发布时间：2020-01-01

  • jquery实现ajax提交表单信息的方法汇总

    下面小编就为大家带来一篇jquery实现ajax提交表单信息的简单方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-03-13

  • 总结python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法

    下面小编就为大家带来一篇python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-02-09

  • 实例解析jquery ajax jsonp跨域调用

    今天研究了AJAX使用JSONP进行跨域调用的方法，发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下，方便需要的朋友

    发布时间：2020-03-16

  • 总结jquery中get,post和ajax方法使用

    本篇文章主要是对jquery中get,post和ajax方法的使用进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    发布时间：2020-01-22

  • 解析jquery Ajax 实现加载数据前动画效果

    本篇文章主要是对jquery Ajax实现加载数据前动画效果的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    发布时间：2020-01-27

  • PHP与jQuery开发实例

    PHP与jQuery开发实例

    这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格，探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

    大小：9.8 MBPHP开发

  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发，而前端开发有一个流行趋势，那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小：48.4 MBjQuery电子书

  • jQuery api 3.3.1中文手册

    jQuery api 3.3.1中文手册

    jQuery3.3.1中文手册 是一套jQuery API 3.3.1速查表，很实用的手册，在编写jQuery查看很实用，其内包含了jquery学习过程中的各类知识点，能够让你清楚地了解每一个函数的核心内容，属性以及css框架信息，从而更好的实现编程。需要的朋友可下载试试！ 使用说明 这是目前最新版的jQuery api中文文档3.3.1版本。先解压压缩包。在打开软件。如果出现空白情况。请确保IE版本在9.0以上，或者是鼠标右击文件，选择ldquo;属性rdquo;，点击ldquo;取消限制rdquo;即

    大小：1.58 MBjQuery

  • 移动互联网之路：HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

    移动互联网之路：HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

    移动互联网之路 全面、系统地讲解了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面设计到移动应用开发的各种技术和知识点。本书难度适中，知识结构严谨，内容由浅入深、从易到难，讲解通俗易懂，

    大小：92.1 MB移动互联网电子书

  • jQuery实战案例精粹

    jQuery实战案例精粹

    jQuery实战案例精粹 从Web开发的实际应用角度出发，结合当下热门的 jQuery插件技术，深入浅出地介绍了 jQuery高性能开发的技巧，是前端开发、设计人员的绝佳选择。 本书共 22章，介绍了 jQuer

    大小：272 MBjQuery电子书

  • jQuery实战从入门到精通

    jQuery实战从入门到精通

    本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术，适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

    大小：189.1 MBjQuery电子书

用户留言

发布评论

最新更新

热门推荐