鍍金池/ 問答/HTML5  HTML/ input file上傳圖片，先本地預(yù)覽之后，再上傳! file報錯undefi

input file上傳圖片，先本地預(yù)覽之后，再上傳! file報錯undefined ,請問是什么原因？

如題，file進(jìn)行圖片上傳，先做的是本地預(yù)覽，然后提交的時候再上傳，獲得files報錯，請問什么原因?

HTML:

 <input class="upload-file" onchange="selectImg()" id="file" type="file" name="file" accept="image/*" multiple >

 <input class="upImgBtn" onclick="doUpload()" type="button" value="上傳"/>

js部分：

//選擇圖片之后的預(yù)覽
    function selectImg(e){
        var file =  $("#file").files;
        console.log(file);//這里是undefined
        for(i = 0; i< file.length; i ++) {//這里報錯：Cannot read property 'length' of undefined
            var reader = new FileReader();
            var src = reader.readAsDataURL(file[i]);
            reader.onload=function(e){
                //多圖預(yù)覽
                var imgStr = '<dl class="picBox"><dt>' +
                        '<img src="' + src +'"/><img onclick="delImgbox(this)" class="close" src="/depend/duilv2.0/images/icon_close.png"/></dt>'+
                        '<dd><input name="' + src+'" type="hidden" value="'+src+'"/>' +
                        '<input class="picTxt" maxlength="10" placeholder="圖片介紹..."/></dd>';
                $(".uploadBox").before(imgStr);
            }

        }
    }
    //上傳
     function doUpload(){
         //這里是最后的上傳
     }
回答
編輯回答
下墜

$('#file').change(function () {

var  formData = new FormData();
var _this = $(this)[0],
    _filelist = _this.files[0], //  _filelist=_this.files //你要的多張圖
    fileType = _filelist.type;
var blob = new Blob([_filelist], { type:fileType });
var fileReader = new FileReader();
fileReader.readAsDataURL(_filelist);
fileReader.onload = function (event) {
    var result = event.target.result;   //返回的dataURL
    formData.append('imgAttach',blob);
    imgData=imgUpFile(formData);
    $('#ImgLogoBox').attr('src',geturlimg+imgData);  //返回預(yù)覽
};

});

2017年3月12日 21:11
編輯回答
玄鳥

jQuery對象沒有 files 屬性，

document.querySelector('#file').files

或者

$("#file")[0].files;
2017年11月11日 05:02
編輯回答
命于你

var file=e.target.files[0]

2018年8月2日 11:16
編輯回答
凝雅

不要用jq，你應(yīng)該用原生js獲取，

 var file =  $("#file")[0].files;

jq本身獲取不是通過files獲取的，是通過.prop('files')來獲取其自身的files屬性，js是通過files獲取的，這點和checkbox的checked很像，jq的話

 $("#file").prop('files')
2018年5月21日 00:35
編輯回答
凝雅

這個原因有兩條

  1. 你既然用event了,為什么不用ev.target.files[0], 但是前提一定判斷files有值嗎(files.length > 0)
  2. 你獲取后一定要清除 ev.target.value = '', 不然上傳相同的圖片不會執(zhí)行onchange
2017年5月17日 09:10