【www.hj8828.com】jQuery Ajax使用FormData上传文件和其他数据,后端web.py获取

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

<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 () {}
    });
}

使用jQuery的Ajax方法发送FormData数据

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

参考博文:
  Web 前沿——HTML5 Form Data
对象的使用
  通过jQuery
Ajax使用FormData对象上传文件

总结

1.

注意:字段 “userfile” 和 “webmasterfile” 都包含一个文件. 字段 “userid”
是数字类型,它将被FormData.append()方法转换成字符串类型(FormData
对象的字段类型可以是 Blob, File, 或者 string:
如果它的字段类型不是Blob也不是File,则会被转换成字符串类型。

class Add: def POST: i = web.input print #文件名 print #文件内容 print(i['myfile'].file.read #文件内容
  • 前端(JQuery):

FormData对象可以组装一组用
XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data
,则通过FormData传输的数据格式和表单通过submit()
方法传输的数据格式相同;

1.没有

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

您可能感兴趣的文章:

  • jQuery+datatables插件实现ajax加载数据与增删改查功能示例
  • ajax请求data遇到的问题分析
  • Servlet获取AJAX POST请求中参数以form data和request
    payload形式传输的方法
  • 利用 FormData 对象和 Spring MVC
    配合实现Ajax文件下载功能
  • vuejs使用FormData实现ajax上传图片文件
  • jQuery.Ajax()的data参数类型详解
  • jQuery
    Ajax使用FormData上传文件和其他数据后端web.py获取
  • 详解ajax的data参数错误导致页面崩溃

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

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

以上所述是小编给大家介绍的FormData+Ajax实现上传进度监控,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

function loadFile{ container.fd = new FormData(); container.fd.append; 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  {}, error: function ;}

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

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

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
 url: 'Url',
 type: "POST",
 data: formData,
 contentType: false, // 必须 不设置内容类型
 processData: false, // 必须 不处理数据
 xhr: function xhr() {
  //获取原生的xhr对象
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   //添加 progress 事件监听
   xhr.upload.addEventListener('progress', function (e) {
    var nowDate = new Date().getTime();
    //每一秒刷新一次状态
    if (nowDate - time >= 1000) {
     //已上传文件字节数/总字节数
     percentage = parseInt(e.loaded / e.total * 100);
     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
     velocity = (e.loaded - loaded) / 1024;
     if (percentage >= 99) {
      $(".hintText").html('服务端正在解析,请稍后');
     } else {
      //修改上次记录时间及数据大小
      time = nowDate;
      loaded = e.loaded;
     }
    } else {
     return;
    }
   }, false);
  }
  return xhr;
 },
 success: function success(response) {
  //成功回调   
 },
 error: function error(error) {
  //失败回调    
 }
});

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

<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>

如何创建一个FormData对象