图像名称和维度在fileselect上通过循环不匹配

时间:2017-09-04 15:07:47

标签: javascript html5 css3 file

根据我之前发布的问题,我得到了答案。我需要获得图像名称和尺寸。 我已经尝试了很多东西来获取它们,但名称和尺寸变得不匹配

How to read(image data / dimension / filesize / name) multiple images on file select?

1 个答案:

答案 0 :(得分:0)

下面是获取图像文件信息的完整功能。

fileSelect.addEventListener("change", getSomeFile, false);

function getSomeFile(ev){
    var file= ev.target.files;
    if (file) {
        for(var i=0,f; f = file[i]; i++){
            if(!f.type.match('image.*')){continue;}
            (function(f){
            var reader = new FileReader();
            reader.readAsDataURL(file[i]);
            reader.onload = function () {
            var img = new Image();
            img.onload = function() {

                var span = document.createElement('span');
                span.innerHTML = ['<img id="thumb" src="', img.src,'"/>'].join('');
                document.getElementById('mid').appendChild(span, null);
                    var fileName =f.name;
                    var fileSize =Math.round(f.size/1024)+' KB';
                    var imageWidth = img.width;
                    var imageHeight = img.height;
            };
        img.src = reader.result;
       };
      })(file[i]);
    }
  }
fileSelect.value='';
}