Question

我（很可能）有一个简单的问题需要解决，但我自己也无法弄明白。基本上我的reader.width和reader.height一直说未定义：/ ..其他一切都按原样运作

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 - 所有这些都返回undefined：/

我试图谷歌但是根据我读过的所有内容阅读器。宽度应该可行

感谢帮助

干杯，汤姆

Answer 1

FileReader本身没有width属性。它的结果只包含原始图像数据。必须先将其加载为Image，然后才能读取宽度。因此，您需要上传处理程序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>');
}

javascript filereader未定义的宽度

1 个答案: