在本次的项目中,需要使用到本地文件上传这个功能,但是现在市面上的各上传文件的插件,不是太过于臃肿,就是不符合实际的项目需求场景,所以自己封装了一个原生的js上传附件。
我们知道,原生的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大佬可以自行研究。