アップロード前の画像サイズを確認する

Question

アップロードする前にそのサイズがチェックされていることをTwitterにアップロードするときに気付いた。誰も私のような解決策を指摘することはできますか？

おかげ

Answer 1

あなたがアップロードする前にファイルサイズを確認するためにuploadifyのようなものを使用することができ、ファイルサイズをチェックしている場合。

実際のファイルのサイズ（高さ/幅）を確認する必要がある場合があります。

Answer 2

フラッシュを使用しない限り不可能だと思います。そのようなものにはuploadifyまたはswfuploadを使用できます。

Answer 3

私はこのコードをchromeでテストしても問題ありません。

var x = document.getElementById('APP_LOGO'); // get the file input element in your form 
var f = x.files.item(0); // get only the first file from the list of files 
var filesize = f.size; 
alert("the size of the image is : "+filesize+" bytes"); 

var i = new Image(); 
var reader = new FileReader(); 
reader.readAsDataURL(f); 
i.src=reader.result; 
var imageWidth = i.width; 
var imageHeight = i.height; 
alert("the width of the image is : "+imageWidth); 
alert("the height of the image is : "+imageHeight); 

Answer 4

このような何かが非同期的にロードされたフォーム、またはで「複数」FileReader.readAsDataURLとImage.srcを使用するときに起こるレース条件を設定し、避けることなく、入力にも対応する必要があります。

$('#formContainer').on('change', '#inputFileUpload', function(event) { 
    var file, _fn, _i, _len, _ref; 
    _ref = event.target.files; 
    _fn = function(file) { 
    var reader = new FileReader(); 
    reader.onload = (function(f) { 
     return function() { 
     var i = new Image(); 
     i.onload = (function(e) { 
      var height, width; 
      width = e.target.width; 
      height = e.target.height; 
      return doSomethingWith(width, height); 
     }); 
     return i.src = reader.result; 
     }; 
    })(file); 
    return reader.readAsDataURL(file); 
    }; 
    for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
    file = _ref[_i]; 
    _fn(file); 
    } 
}); 

注：画像の幅と高さ画像のonloadをチェックする必要がある

<div id="formContainer"> 
    <form ...> 
    ... 
    <input type="file" id="inputFileUpload"></input> 
    ... 
    </form> 
</div> 

Answer 5

：jQueryの、HTML5、のような構造にフックを必要とします。

var img = new Image; 
img.src = URL.createObjectURL(file); 
img.onload = function() { 
    var picWidth = this.width; 
    var picHeight = this.height; 

    if (Number(picWidth) > maxwidth || Number(picHeight) > maxheight) { 
     alert("Maximum dimension of the image to be 1024px by 768px"); 
     return false; 
    } 
}