HTML5ウェーブに乗ろうとしていますが、小さな問題に直面しています。HTML5以前は、フラッシュを使用してファイルサイズをチェックしていましたが、現在はWebアプリでフラッシュを使用しない傾向にあります。HTML5を使用してクライアント側でファイルサイズを確認する方法はありますか？
HTML5ウェーブに乗ろうとしていますが、小さな問題に直面しています。HTML5以前は、フラッシュを使用してファイルサイズをチェックしていましたが、現在はWebアプリでフラッシュを使用しない傾向にあります。HTML5を使用してクライアント側でファイルサイズを確認する方法はありますか？
回答:
これは機能します。入力が変更されたときのために、イベントリスナー内に配置します。
if (typeof FileReader !== "undefined") {
var size = document.getElementById('myfile').files[0].size;
// check file size
}
受け入れられた答えは実際には正しいですが、ファイル入力が変更されるたびに更新されるように、イベントリスナーにバインドする必要があります。
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を、どのメトリックで表示するかはあなた次第です。
.files：jsfiddle.net/edxvo4wa（ -あなたはそれが変更された場合、それは動作します、私は解決策を考え出すされたとき、私はこれを自分で発見しましたdocument.getElementById）。
HTML5 fie apiは、ファイルサイズのチェックをサポートしています。
ファイルAPIの詳細については、この記事をお読みください
http://www.html5rocks.com/en/tutorials/file/dndfiles/
<input type="file" id="fileInput" />
var size = document.getElementById("fileInput").files[0].size;
同様に、ファイルAPIは名前とタイプを提供します。
個人的に、私はこのフォーマットを選びます：
$('#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
}
}
「これを実現するための単純なクロスブラウザソリューションはありません」：クライアント側でファイルのアップロードサイズを検出していますか？