web-dev-qa-db-ja.com

アップロードされた画像ファイルのjavascript / jqueryサイズと寸法

画像サイズをキロバイトで表示し、寸法（高さ、幅）をjavascript/jqueryを使用して表示する必要があります。私はいくつかの同様の投稿に出くわしましたが、どれも私を助けることができませんでした。別々に機能する2つのコードセットがあります。それらをどのように組み合わせるかわかりません。

これは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);
    }
});

これらのコードをまとめて、サイズと寸法の両方を表示するのを手伝ってください。

javascriptjqueryfile-uploadimage-size
10
sridhar

2つのコードを使用するために必要なことは、それらをdisplayPreview関数で結合することだけです。 previewに追加する画像オブジェクトを作成し、サイズ、幅、高さをすべて同じ関数で確認できます。

var _URL = window.URL || window.webkitURL;
function displayPreview(files) {
   var file = files[0];//get file   
   var img = new Image();
   var sizeKB = file.size / 1024;
   img.onload = function() {
      $('#preview').append(img);
      alert("Size: " + sizeKB + "KB\nWidth: " + img.width + "\nHeight: " + img.height);
   }
   img.src = _URL.createObjectURL(file);
}
17
Steven Lambert

このように試すことができます

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
Manish

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
Jasbir Singh