使用 File API 获取文件的宽度和高度答案

【问题标题】：Getting file width and height with File API使用 File API 获取文件的宽度和高度
【发布时间】：2013-06-13 21:13:50
【问题描述】：

我没有太多使用 HTML5 File API，所以对它很陌生。

我正在尝试将文件上传字段“#submission-file”字段中的文件的宽度和高度转换为两个变量。

这是我的代码：

    var fileWidth = 0;
    var fileHeight = 0;
    var url = window.URL || window.webkitURL;
    var fileField = $('#submission-file')[0].files[0];
    var image = new Image();
    image.onload = function() {
        fileWidth = $('#submission-file').width;
        fileHeight = $('#submission-file').height;
    };
    image.src = url.createObjectURL(fileField);

谁能告诉我我做错了什么？

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/5173796/html5-get-image-dimension
@tymeJV 该问答没有解释为什么他无法在他的onload 回调中获取文件的宽度和高度。当上面调用onload 回调时，应该加载文件 - 因此，他应该能够访问这些属性。

标签： jquery html

【解决方案1】：

你可以用这个sn-p，给你个思路：

http://jsfiddle.net/Mqvgx/

function getImgSize(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#testImg').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$('#testImg').on('load', function () {
    alert($(this).width() + '*' + $(this).height());
})

$("input").change(function () {
    getImgSize(this);
});

【讨论】：