使用formdata()的原生js文件上传
2017-07-07 00:00
253 查看
在本次的项目中,需要使用到本地文件上传这个功能,但是现在市面上的各上传文件的插件,不是太过于臃肿,就是不符合实际的项目需求场景,所以自己封装了一个原生的js上传附件。
我们知道,原生的js上传附件,我们大部分采用input框的file进行上传,但是在提交表单的时候,页面会舒心,那么此时我们只能采用ajax的方式与后台进行交互,但是ajax如何能够上传文件呢,大部分的做法是将文件进行二级制或者其他的转换,但是此时更简单的做法则是使用Formdata()来进行表单提交数据的序列化做法。
我们的页面布局:
此时我们使用input的自带file属性将他设置成一个文件上传的选择框,下面是js代码:
如上代码,我们使用formdata()进行参数传递到后台,后台可以直接通过这个form表单的提交而获取道我们上传的文件,而我们可以通过“files.files”获取到我们上传的文件,注意,此时获取到的是一个文件的数组,里面包含了这个文件的各种属性。
当然,在实际的项目需求中,我们可能还要同时传递各种不同的参数到后台,此时我们可以使用formdata()的append的方法,将我们需要的参数也封装到formdata对象中一起传递到后台,代码如下:
其实此时添加进去的就是一个key:value的键值对,但是此时在后台想要获取这个参数,在springMVC中好像还要经过一些处理,具体的我也不是很清除,各位JAVA大佬可以自行研究。
我们知道,原生的js上传附件,我们大部分采用input框的file进行上传,但是在提交表单的时候,页面会舒心,那么此时我们只能采用ajax的方式与后台进行交互,但是ajax如何能够上传文件呢,大部分的做法是将文件进行二级制或者其他的转换,但是此时更简单的做法则是使用Formdata()来进行表单提交数据的序列化做法。
我们的页面布局:
<form enctype="multipart/form-data;charset=utf-8" method="post" id="fileinfo"> <span class="col-xs-2 popBold">上传:</span> <input class="col-xs-6 col-sm-6" type="file" id="file" name="file" multiple="multiple"> <input id="uploadBtn" class="col-xs-1 col-sm-1" type="button" value="上传" /> </form>
此时我们使用input的自带file属性将他设置成一个文件上传的选择框,下面是js代码:
// 修改页面 // 上传文件 // 1、参数为发送隐藏参数的表单的input框的选择器 string // 3、参数为上传文件的input框的id string // 4、参数为上传form表单的id string function uploadUpdata(randSlect, rand, uploadSlect, formSlect, target_table, target_col, file_type, showSlect, deletetarget_uidSlect, delVar, showFilesUpdata) { $(randSlect).val(rand); // 获取上传的文件 var files = document.getElementById(uploadSlect); // 禁止exe文件 var choseExe = ".exe"; if (files.files.length == 0) { alert("请选择文件"); return false } else { // 循环便利文件列表判断文件类型 for (var i = 0; i < files.files.length; i++) { if (files.files[i].name.indexOf(choseExe) !== -1) { alert(files.files[i].name + "为不支持的文件类型"); return false } } var form = document.getElementById(formSlect); var oData = new FormData(form); var oReq = new XMLHttpRequest(); oReq.open("POST", ctx + "/FileUploadServlet?target_table=" + target_table + "&target_col=" + target_col + "&file_type=" + file_type + "&target_uid=" + rand, true) oReq.send(oData); oReq.onreadystatechange = function () { if (oReq.status == 200 && oReq.readyState == 4) { alert("上传成功"); files.value = ""; //此处是我接下来的处理函数,开发过程中可以将其定义成一个callback iploadListUpdata(showFilesUpdata, rand, file_type, deletetarget_uidSlect, delVar); } else if (oReq.status !== 200 && oReq.readyState !== 4) { alert("上传失败,请检查网路设置") } else { // alert("yizhizaizhixing") } }; } }
如上代码,我们使用formdata()进行参数传递到后台,后台可以直接通过这个form表单的提交而获取道我们上传的文件,而我们可以通过“files.files”获取到我们上传的文件,注意,此时获取到的是一个文件的数组,里面包含了这个文件的各种属性。
当然,在实际的项目需求中,我们可能还要同时传递各种不同的参数到后台,此时我们可以使用formdata()的append的方法,将我们需要的参数也封装到formdata对象中一起传递到后台,代码如下:
formdata.append('key','value');
其实此时添加进去的就是一个key:value的键值对,但是此时在后台想要获取这个参数,在springMVC中好像还要经过一些处理,具体的我也不是很清除,各位JAVA大佬可以自行研究。
相关文章推荐
- Asp.net + js 异步上传文件的例子 - 使用iframe实现
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用Ajaxupload.js上传文件
- 使用ajaxfileupload.js实现ajax上传文件php版
- 使用AjaxFileUpload.js实现异步文件上传示例
- js无刷新无插件异步上传文件,使用dojo.io.iframe发送form数据包
- 上传图片时,使用JS获得图片文件大小
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传
- 使用Ajaxupload.js上传文件
- 使用ajaxfileupload.js实现ajax上传文件php版
- node.js+android(使用HttpURLConnection和HttpClient)实现文件上传
- 使用 js 获得上传文件的真实路径 chrome 浏览器 除外
- 使用FileUpload上传文件时用js给出提示...
- 使用ajaxfileupload.js插件实现Ajax方式上传文件
- 使用MultFile.js实现多文件上传
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 关于jquery.form.js插件的无刷新上传文件使用的问题
- 使用MultFile.js实现多文件上传
- 使用AjaxFileUpload.js实现文件异步上传
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传