使用formdata()的原生js文件上传

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

转载于:https://my.oschina.net/u/2941129/blog/1204134