javascript / jQuery размер и размер загруженного файла изображения

мне нужно отобразить размер изображения в килобайтах и размер (высота, ширина) с помощью javascript/jquery. Я наткнулся на несколько подобных сообщений, но никто не мог мне помочь. У меня есть два набора кодов, которые работают отдельно. Я не могу понять, как их соединить.

- Это HTML код:

<span id="preview"></span>
<input type="file" id="file" onchange="displayPreview(this.files);"/>

этот кусок кода проверяет размер файла и предварительный просмотр изображения:

function onFileLoad(e) { 
    $('#preview').append('<img src="'+e.target.result +'"/>');  
}
function displayPreview(files) {
    var reader = new FileReader();
    reader.onload = onFileLoad;
    reader.readAsDataURL(files[0]);
    fileSize = Math.round(files[0].size/1024);
    alert("File size is "+fileSize+" kb");
}

этот фрагмент кода проверяет размер файла:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            alert(this.width + " " + this.height);
        };
        img.src = _URL.createObjectURL(file);
    }
});

пожалуйста помогите мне собрать эти коды вместе и отобразить как размер, так и размер вместе.

9
file-upload image-size javascript jquery

3 ответов

все, что вам нужно сделать, чтобы использовать два кода, чтобы объединить их в

16

вы можете попробовать так

HTML-код

<span id="preview"></span>
<input type="file" id="file" />

в jQuery

var _URL = window.URL || window.webkitURL;

function displayPreview(files) {
    var img = new Image(),
        fileSize = Math.round(files.size / 1024);

    img.onload = function () {
        var width = this.width,
            height = this.height,
            imgsrc = this.src;

        doSomething(fileSize, width, height, imgsrc); //call function

    };
    img.src = _URL.createObjectURL(files);
}

// Do what you want in this function
function doSomething(size, width, height, imgsrc) {
    $('#preview').append('<img src="' + imgsrc + '">');
    alert("Size=" + size);
    alert("Width=" + width + " height=" + height);


}

оба метода

Jsfiddle http://jsfiddle.net/code_snips/w4y75/ Jsfiddle http://jsfiddle.net/code_snips/w4y75/1/

2

Как получить ширину и высоту изображения с помощью jQuery

узнайте ширину и высоту изображения во время загрузки изображения с помощью jQuery

размер и размер файла изображения загрузки

var _URL = window.URL || window.webkitURL;
$("#myfile").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            var wid = this.width;
            var ht = this.height;

            alert(this.width + " " + this.height);
            alert(wid);
            alert(ht);
        };

        img.src = _URL.createObjectURL(file);
    }
});
1