javascript 文件阅读器未定义的宽度答案

【问题标题】：javascript filereader undefined widthjavascript 文件阅读器未定义的宽度
【发布时间】：2014-02-08 10:54:39
【问题描述】：

我有（可能）很容易解决的问题，但我自己无法解决。基本上我的 reader.width 和 reader.height 一直说 undefined :/.. 其他一切都按预期工作

function handleFileSelect(evt, selector) {

    var f = evt.target.files[0];
    var reader = new FileReader();

    reader.onload = (function(theFile) {
    return function(e) {
        var imgW = reader.width;
        var imgH = reader.height;
        console.debug("width: "+imgW); // undefined
        console.debug("height: "+imgH); // undefined
        var thumbHtml = ['<span><img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/></span>'].join('');
        $(selector).parent().siblings('.previewThumb').html(thumbHtml);
        $(selector).parent().siblings('.previewThumb').removeClass('hidden')

    };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
    $(selector).siblings('.list').html('<span>'+escape(f.name)+'</span></span>');
}

我也试过e.width 和theFile.width - 它们都返回未定义：/

我尝试用谷歌搜索，但根据我阅读的所有内容，reader.width 应该可以工作

感谢帮助

干杯，汤姆

【问题讨论】：

我认为 FileReader 没有 width 属性。你检查过这个答案吗？ stackoverflow.com/questions/15491193/…
是的，这就是我所引用的...我认为它会起作用，但它只是不起作用:(
您需要创建一个Image并将文件内容设置为图像源。然后读取图像的宽度。
哦，好吧，我应该在 reader.onload 里面做吗？

标签： javascript filereader

【解决方案1】：

FileReader 本身没有width 属性。它的结果仅包含原始图像数据。这必须作为Image 加载，然后才能读取宽度。因此，您需要 onload 处理程序 1) 加载文件 2) 加载图像。

试试这样的

function handleFileSelect(evt, selector) {

    var f = evt.target.files[0];
    var reader = new FileReader();

    reader.onload = function(e) { 
        // at this point we have the raw data. now we 
        // create an image out of it
        var image = new Image();
        image.src = e.target.result;

        image.onload = function() {
          // now we have the image.
          var imgW = image.width;
          var imgH = image.height;
          console.debug("width: "+imgW);
          console.debug("height: "+imgH);

          // we can insert image directly into DOM
          var thumb = $(image).addClass("thumb");
          $(selector).parent().siblings('.previewThumb').empty().append(thumb);
          $(selector).parent().siblings('.previewThumb').removeClass('hidden');
        };
    };

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
    $(selector).siblings('.list').html('<span>'+escape(f.name)+'</span></span>');
}

【讨论】：