input file上传的文件怎么通过ajax传给后台？

Question

input file上传的文件怎么通过ajax传给后台？求解，谢谢！

Answer 1

file在change的时候把选择的图片的File给push进数组，提交时new FormData()，循环数组，通过formData.append添加到formData 中，参考我的博客吧链接描述

<input type="file" class="hidden"  id="file"  multiple="multiple"/>
var filearr = [];
var myfile = document.getElementById('file');
myfile.onchange = function(){
    var files = this.files; 
    for(var i = 0;i<files.length;i++){                
         filearr.push(files[i]);
    }
}

sub提交

function sub(){        
    var formData = new FormData();                
    for(var i =0;i<filearr.length;i++){    //提交时，我们把filearr中的数据遍历一遍
        formData.append("upfile[]", filearr[i]); //用append添加到formData中，就得用户最终要提交的图片了，多张的话[]必须    
    };


    formData.append("aaa", 111);    
    var request = new XMLHttpRequest();                 
    request.open("POST", "1.php",true);
    request.onreadystatechange = function(){                    
        if(request.readyState==4){                        
            
        }
    };                          //注意一定不要设置request.setRequestHeader
    request.send(formData);
}

ajax的话要处理一下

    $.ajax({
          url: "1.php",
          type: "POST",
          data:formData,
          cache:false,         //不设置缓存
          processData: false,  // 不处理数据
          contentType: false   // 不设置内容类型
    });    

Answer 2

可以通过formData

//页面
<input type="file" name="pic"  id="pic">
//js
var formData = new FormData();
formData.append("picture",document.getElementById("pic").files[0]);
$.ajax(url,formData,function(res){});