web-dev-qa-db-ja.com

クライアントはHTML5を使用してファイルサイズをチェックしますか？

HTML5の波に乗ろうとしていますが、小さな問題に直面しています。 HTML5以前は、フラッシュでファイルサイズをチェックしていましたが、今ではWebアプリでフラッシュの使用を避ける傾向があります。 HTML5を使用してクライアント側でファイルサイズを確認する方法はありますか？

javascripthtml5file-upload
79
Khaled Musaied

これは動作します。入力が変更されたときのために、イベントリスナー内に配置します。

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}
120
Abdullah Jibaly

受け入れられた答えは実際には正しいものですが、ファイル入力が変更されたときに更新されるように、イベントリスナーにバインドする必要があります。

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

JQueryライブラリを使用している場合、次のコードが便利です。

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

FileSizeを変換して、どのメトリックで表示するかはユーザー次第です。

28
Ammadu

HTML5ファイルAPIは、ファイルサイズのチェックをサポートしています。

この記事を読んで、ファイルAPIに関する詳細情報を入手してください。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="fileInput" />


var size = document.getElementById("fileInput").files[0].size;

同様に、ファイルAPIは名前とタイプを提供します。

7
Konga Raju

個人的に、私はこの形式を選ぶでしょう：

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }
3
Alexander Leon

「これを達成するための簡単なクロスブラウザソリューションはありません」： クライアント側でファイルアップロードサイズを検出しますか？

2
Julien