input file上传图片，先本地预览之后，再上传! file报错undefined ,请问是什么原因？

Question

如题，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(){
         //这里是最后的上传
     }

Answer 1

不要用jq，你应该用原生js获取，

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

jq本身获取不是通过files获取的，是通过.prop('files')来获取其自身的files属性，js是通过files获取的，这点和checkbox的checked很像，jq的话

 $("#file").prop('files')

Answer 2

$('#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);  //返回预览
};

});

Answer 3

jQuery对象没有 files 属性，

document.querySelector('#file').files

或者

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

Answer 4

var file=e.target.files[0]

Answer 5

这个原因有两条

1. 你既然用event了,为什么不用ev.target.files[0], 但是前提一定判断files有值吗(files.length > 0)
2. 你获取后一定要清除 ev.target.value = '', 不然上传相同的图片不会执行onchange