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

如題，file進行圖片上傳，先做的是本地預覽，然后提交的時候再上傳，獲得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部分：

//選擇圖片之后的預覽
    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){
                //多圖預覽
                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);  //返回預覽
};

});

2017年3月12日 21:11

編輯回答