当前位置: 首页 > Web前端 > HTML5

使用jsFormData传输文件流,传json(重点)

时间:2023-04-05 00:25:14 HTML5

首先介绍jsFormData,FormData是XMLHttpRequestLevel2的新接口,使用FormData对象,我们可以通过一些键值对来模拟一系列的表单JavaScriptControl,我们也可以使用ajax方法异步提交这个“表单”。使用FormData最大的好处就是我们可以异步上传一个二进制文件。这里是FormData的append方法,为当前FormData对象添加一个键/值对(append)voidappend(DOMStringname,Blobvalue,optionalDOMStringfilename);无效追加(DOMString名称,DOMString值);参数值名称字段名称。值字段值。可以是,也可以是字符串,如果没有,则该值会自动转为字符串。文件名(可选)指定文件的文件名。当value参数指定为Blob对象或File接口时,它提供有关文件的信息并允许网页中的JavaScript访问其内容。")对象,文件名会被发送到服务器。对于Blob对象,这个值默认为"blob"。这里要注意value字段,如果要填写一个对象,会被转换成一个字符串,也就是最后传给后台的是[objectobject],所以后台当然不能解析了,下面举个例子,大家就明白了,请来我们小明和胖子两位同学Tiger,你不用说话,我会以json的形式介绍你的情况和个人爱好,请坐varjson=[{'name':'小明','age':15,'skills':['抽烟','喝酒','烫头'],'家人':{'爸爸':'大明','妈妈':'小红'}},{'名字':'胖虎','age':17,'skills':['fighting','fighting','stillfighting'],'family':{'father':'Sato','mohter':'Aida'}},]首先我们试试一下,把小明的全家对象传到后台。vardata=newFormData()data.append('family',json[0].family)$.ajax({url:'demo.php',type:"Post",dataType:"json",缓存:false,//上传文件不缓存processData:false,//这里用来序列化数据参数必须为falsecontentType:false,//必须为data:data,success:function(res){console.log(res);},error:function(error){console.log(error);}})结果:解析成object对象,有人应该说,可以用JSON.stringify序列化,然后后端配合,然后然后解码成json,是的,确实如此,但是不要忘了,我们还需要传输文件流。文件流序列化后会转为空对象,后台无法识别。由于时间原因,这里就不展示反例了。这里需要用到两个语法1.a['b']isequaltoa.b2.c[0]获取c数组的第一项正确的方法:vardata=newFormData()for(vari=0,len=json.length;i$('#upload').on('change',function(e){varfile=e.target.files[0];console.log(file);数据。append('json[0][image]',file)})Thisfileobject是一个二进制文件,打印为:如果直接序列化这个对象,它会被转换成一个空对象,无法被识别后台,最后附上Vue版本代码:upload:function(e){varfile=e.target.files[0];//由于时间和条件,这里只上传一张小明的照片data.append('json[0][image]',file)for(vari=0,len=json.length;i