집 >웹 프론트엔드 >H5 튜토리얼 >H5의 파일 도메인 FileReader는 어떻게 파일을 세그먼트로 읽고 서버에 업로드합니까?

H5의 파일 도메인 FileReader는 어떻게 파일을 세그먼트로 읽고 서버에 업로드합니까?

php中世界最好的语言원래의: 2018-01-29 10:26:102329검색

이번에는 H5 파일 도메인 FileReader를 사용하여 파일 읽기를 분할하고 서버에 업로드하는 방법을 보여드리겠습니다. H5 파일 도메인 FileReader가 세그먼트별로 파일을 읽고 서버에 업로드하기 위한 주의 사항은 무엇입니까? .다음은 실제 전투를 살펴보겠습니다.

참고: Ajax를 사용하여 업로드할 때 파일은 너무 커서는 안 됩니다. 300~400MB 미만이 바람직합니다. 연속적인 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 중국어 웹사이트!