H5 のファイル ドメイン FileReader はどのようにセグメント内のファイルを読み取り、サーバーにアップロードするのでしょうか?

今回は、H5 ファイルドメイン FileReader でファイルを分割して読み取ってサーバーにアップロードする方法を説明します。 H5 ファイルドメイン FileReader でファイルを分割して読み取ってサーバーにアップロードするための注意事項とは何ですか。 . 以下、実際の戦闘を見てみましょう。

注: Ajax を使用してアップロードする場合、ファイルは大きすぎないように注意してください。できれば 300 ～ 400 メガバイト未満にしてください。これは、連続する Ajax リクエストが多すぎるとバックグラウンドがクラッシュし、InputStream 内のデータが空になるためです。 Google ブラウザのテスト プロセス中。

1 、関数の操作を続行します

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">分段读取文件：</div>
        <div class="panel-body">
            <input type="file" id="file" />
            <blockquote style="word-break:break-all;"></blockquote>
        </div>
    </div>
</div>

JS:

/*
* 分段读取文件为blob ，并使用ajax上传到服务器
* 分段上传exe文件会抛出异常
*/
var fileBox = document.getElementById('file');
file.onchange = function () {
    //获取文件对象
    var file = this.files[0];
    var reader = new FileReader();
    var step = 1024 * 1024;
    var total = file.size;
    var cuLoaded = 0;
    console.info("文件大小：" + file.size);
    var startTime = new Date();
    //读取一段成功
    reader.onload = function (e) {
        //处理读取的结果
        var loaded = e.loaded;
        //将分段数据上传到服务器
        uploadFile(reader.result, cuLoaded, function () {
            console.info('loaded:' + cuLoaded + 'current:' + loaded);
            //如果没有读完，继续
            cuLoaded += loaded;
            if (cuLoaded < total) {
                readBlob(cuLoaded);
            } else {
                console.log(&#39;总共用时：&#39; + (new Date().getTime() - startTime.getTime()) / 1000);
                cuLoaded = total;
            }
        });
    }
    //指定开始位置，分块读取文件
    function readBlob(start) {
        //指定开始位置和结束位置读取文件
        //console.info(&#39;start:&#39; + start);
        var blob = file.slice(start, start + step);
        reader.readAsArrayBuffer(blob);
    }
    //开始读取
    readBlob(0);
    //关键代码上传到服务器
    function uploadFile(result, startIndex, onSuccess) {
        var blob = new Blob([result]);
        //提交到服务器
        var fd = new FormData();
        fd.append(&#39;file&#39;, blob);
        fd.append(&#39;filename&#39;, file.name);
        fd.append(&#39;loaded&#39;, startIndex);
        var xhr = new XMLHttpRequest();
        xhr.open(&#39;post&#39;, &#39;../ashx/upload2.ashx&#39;, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // var data = eval(&#39;(&#39; + xhr.responseText + &#39;)&#39;);
                console.info(xhr.responseText);
                if (onSuccess)
                    onSuccess();
            }
        }
        //开始发送
        xhr.send(fd);
    }
}

背景のコードは上記と同じです

これらの事例を読んだ後は、メソッドを習得したと思います。さらにエキサイティングな内容については、 の他の関連記事に注目してください。 PHP中国語ウェブサイトです！

関連書籍:

HTML で送信した後、ドロップダウン メニューの選択した値をデフォルト値に戻さずに維持するにはどうすればよいですか?

タグの href 属性と onclick イベントを使用する方法

HTMLタグのネストの詳細ルール

以上がH5 のファイル ドメイン FileReader はどのようにセグメント内のファイルを読み取り、サーバーにアップロードするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。