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

input file上传的文件怎么通过ajax传给后台?求解,谢谢!

阅读 9.7k
评论 2017-12-27 提问
    2 个回答

    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   // 不设置内容类型
        });    
    评论 赞赏 2017-12-27
      Reachel
      • 2.6k

      可以通过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){});
      评论 赞赏 2017-12-27
        撰写回答

        登录后参与交流、获取后续更新提醒