javascript - アップロード中にファイルサイズを確認し、JavaScriptでファイルサイズ制限を超えるアップロードを停止しますか?

Question

javascript または jquery を使用してファイルのアップロードの進行状況 (つまり、サーバーが受信したバイト数または kb 数) を確認し、特定の制限を超えた場合にアップロードを中断して、ユーザーに警告/エラー メッセージを表示する方法はありますか? ? ありがとうございました。

Answer 1

この例はあなたを助けるかもしれません: http://js1.hotblocks.nl/tests/ajax/file-drag-drop.html

(ドラッグ/ドロップ インターフェイスも含まれていますが、これは簡単に無視されます。)

基本的には、次のようになります。

<input id=files type=file>

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    xhr.file = file; // not necessary if you create scopes like this
    xhr.addEventListener('progress', function(e) {
        var done = e.position || e.loaded, total = e.totalSize || e.total;
        console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
    }, false);
    if ( xhr.upload ) {
        xhr.upload.onprogress = function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
        };
    }
    xhr.onreadystatechange = function(e) {
        if ( 4 == this.readyState ) {
            console.log(['xhr upload complete', e]);
        }
    };
    xhr.open('post', url, true);
    xhr.send(file);
}, false);
</script>

プログレスメソッドでファイルサイズなどを取得しました。これで問題が解決することを願っています。よろしく。