用js FormData传文件流,传json(重点)

作者 : 开心源码 本文共2319个字,预计阅读时间需要6分钟 发布时间: 2022-05-11 共67人阅读

先详情js的FormData,FormData是XMLHttpRequest Level 2新添加的一个接口,利使用FormData对象,我们能通过JavaScript使用少量键值对来模拟一系列表单控件,我们还能用ajax方法来异步的提交这个”表单”.用FormData的最大优点就是我们能异步上传一个二进制文件.
这里说下FormData的append方法,

给当前FormData对象增加一个键/值对(append)

void append(DOMString name, Blob value, optional DOMString filename);void append(DOMString name, DOMString value);

参数值

name

字段名称.

value

字段值.能是,或者者一个字符串,假如全都不是,则该值会被自动转换成字符串.

filename

(可选) 指定文件的文件名,当value参数被指定为一个Blob对象或者者一个File对象时,该文件名会被发送到服务器上,对于Blob对象来说,这个值默认为”blob”.

这里要注意下value字段,假如你要填入的是一个对象,会将它转换成字符串,也就是最后传给后端的都是[object object],这样后端当然是无法解析的。下边举个例子,大家就明白了

好了,请上我们的两位同学,小明和胖虎,你们就不使用发言了,我会以json的形式详情你们的情况和个人癖好,请坐。

var json=[         {'name':'小明','age':15,'skills':['抽烟','喝酒','烫头'],'family':{'father':'大明','mohter':'小红'}},         {'name':'胖虎','age':17,'skills':['打架','打架','还是打架'],'family':{'father':'佐藤','mohter':'爱田'}},     ]

首先我们先试一下,把小明的family对象传给后端。

var data=new FormData()     data.append('family',json[0].family)     $.ajax({         url:'demo.php',         type: "Post",         dataType: "json",         cache: false,//上传文件无需缓存         processData: false,//使用于对data参数进行序列化解决 这里必需false         contentType: false, //必需         data:data,         success:function (res) {             console.log(res);         },         error:function (error) {             console.log(error);         }     })

结果:


被解析成了object object,有人该说了,你把它使用JSON.stringify序列化之后不就行了,而后后台配合,再解码成json,对,这样的确行,但不要忘了,咱们还是需要传文件流的,文件流被序列化之后会被转化成一个空对象,这样后端就无法识别。因为时间起因,这里就不演示反面案例了。
这里我们要使用两个语法
1.a[‘b’]等于a.b
2.c[0]获得是c数组的第一项
正确方法:

var data=new FormData()for(var i=0,len=json.length;i<len;i++){        data.append('json['+i+'][name]',json[i].name)        data.append('json['+i+'][age]',json[i].age)        data.append('json['+i+'][family][father]',json[i].family.father)        data.append('json['+i+'][family][mother]',json[i].family.mohter)        for(var j=0,len2=json[i].skills.length;j<len2;j++){            data.append('skills['+i+']['+j+']',json[i].skills[j])        }    }     $.ajax({         url:'demo.php',         type: "Post",         dataType: "json",         cache: false,//上传文件无需缓存         processData: false,//使用于对data参数进行序列化解决 这里必需false         contentType: false, //必需         data:data,         success:function (res) {             console.log(res);         },         error:function (error) {             console.log(error);         }     })

之后,我们再给小明和胖虎每人上传一张个人写真照(利使用input
file,文件流)
这里我们利使用input上传时的file对象,
附上代码:

<input type="file" id="upload">$('#upload').on('change',function (e) {         var file = e.target.files[0];         console.log(file);         data.append('json[0][image]',file)     })

这个file对象是一个含有二进制文件,打印为:

这个对象假如直接序列化,会被转化为一个空对象,后端无法识别,最后附上vue版代码:

<input type="file" @click="upload" id="upload">upload:function (e) {             var file = e.target.files[0];             data.append('json[0][image]',file)         },

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用js FormData传文件流,传json(重点)

发表回复