ホームページ > ウェブフロントエンド > H5 チュートリアル > H5 のファイル ドメイン FileReader はどのようにセグメント内のファイルを読み取り、サーバーにアップロードするのでしょうか?

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

php中世界最好的语言
リリース: 2018-01-29 10:26:10
オリジナル
2338 人が閲覧しました

今回は、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(&#39;file&#39;);
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(&#39;loaded:&#39; + cuLoaded + &#39;current:&#39; + 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート