javascript filereader неопределенная ширина

У меня (вероятно) простая проблема, но я не могу понять это сам. В основном мои 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 - все они возвращают значение undefined :/

Я пытался гуглить, но судя по всему, что я прочитал, reader.width должен работать

Благодарим за помощь

Привет, Том


javascript filereader
person Tomasz Golinski    schedule 19.01.2014    source источник
comment
Я не думаю, что FileReader имеет свойство width. Вы проверили этот ответ? stackoverflow.com/ вопросы/15491193/   -  person z33m    schedule 19.01.2014
comment
да, это то, на что я ссылался... Я думал, что это сработает, но это просто не так :(   -  person Tomasz Golinski    schedule 19.01.2014
comment
вам нужно создать Image и установить содержимое файла в качестве источника изображения. а затем прочитайте ширину изображения.   -  person z33m    schedule 19.01.2014
comment
о, хорошо, я должен сделать это внутри reader.onload ?   -  person Tomasz Golinski    schedule 19.01.2014

Ответы (1)


arrow_upward
2
arrow_downward

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>');
}
person z33m    schedule 19.01.2014