jquery input-file不用form实现多文件自动上传

01 前言

最近项目上用到了input-file的文件上传，到了跟后台交互的步骤。遂去百度看看前端代码应该如何书写。发现百度上有两种方式，一是input file包裹在form元素内，利用表单元素提交实现发送文件内容到服务器；二是利用formData对象，将文件流与文件名作为键值对形式存入该对象，在发送给服务器。两种都可行，我在此使用第二种，但是百度多是默认上传一个文件，遂自己改造改造实现多文件上传。代码如下：

02 代码

这段代码是用来选择完文件自动上传的，给三个input file绑定了onchane事件，uploadFile方法是封装的具体发请求的代码，下方继续贴出

//上传文件
function addUploadFileMethod(bill_code){
   $('#sjt').change(function(){
   	if($(this).val() != ""){
   		uploadFile('sjt',bill_code,'sj');
       }
   })
   $('#sgt').change(function(){
   	if($(this).val() != ""){
   		uploadFile('sgt',bill_code,'sg');
       }
   })
   $('#xczp').change(function(){
   	if($(this).val() != ""){
   		uploadFile('xczp',bill_code,'pz');
       }
   })
}

重点来咯

稍微解释一下，ele是input file 的id，其余两个参数都是我这边实际请求用到的参数，跟本例并无直接联系，可以忽略。

//上传文件方法封装
function uploadFile(ele,bill_code,type){
	var formData = new FormData();
    
	var files = $('#'+ele)[0].files;
    for(var i = 0;i < files.length;i++){
    	var name = files[i].name;              
        var file = files[i];
        
        formData.append("file" + i, file);
        formData.append("name" + i, name);
    }
                                                
    $.ajax({
        url: url + "InstallatManagementUtilController/uploadFile?bill_code="+bill_code+"&file_category="+type,
        type: 'POST',
        data: formData,
        processData: false,    // ⑧告诉jQuery不要去处理发送的数据
        contentType: false,    // ⑨告诉jQuery不要去设置Content-Type请求头
        success: function (responseStr) {                 
            layer.msg("上传成功啦！",{icon:6});
        }
        ,
        error : function (responseStr) {
        	layer.msg("上传失败啦，请检查！",{icon:5});
        }
    });
}

03 总结

入门级文章，欢迎批评指正，交流学习~