Javascript大文件上传器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript大文件上传器相关的知识，希望对你有一定的参考价值。

我在线复制了一个代码，将一个大文件上传到我的服务器。它基本上将大文件切成块并发送然后单独结束它们。所以第一个块成功发送到服务器，但其余部分不起作用。我不确定哪个阶段会导致问题，请有人帮忙。

<html>
    <head>
        <title>Upload Files using XMLHttpRequest</title>
        <script type="text/javascript">

            window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;

            function sendRequest() {
                var blob = document.getElementById('fileToUpload').files[0];
                const BYTES_PER_CHUNK = 1048576; // 1MB chunk sizes.
                const SIZE = blob.size;
                var start = 0;
                var i =0;
                var part = 0;
                while( start < SIZE ) {
                    var chunk = blob.slice(start, BYTES_PER_CHUNK);
                    //alert(chunk.size());
                    uploadFile(chunk,part);
                    //alert("here");
                    start = start + BYTES_PER_CHUNK;
                    part++;
                }
            }

            function fileSelected() {
                var file = document.getElementById('fileToUpload').files[0];
                if (file) {
                    var fileSize = 0;
                    if (file.size > 1024 * 1024)
                        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                    else
                        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                    document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                    document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                    document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
                }
            }

            function uploadFile(blobFile,part) {
                var file = document.getElementById('fileToUpload').files[0];  
                var fd = new FormData();
                fd.append("fileToUpload", blobFile);

                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.addEventListener("error", uploadFailed, false);
                xhr.addEventListener("abort", uploadCanceled, false);
                xhr.open("POST", "upload.php"+"?"+"file="+file.name+"&num=" + part);
                xhr.onload = function(e) {
                  //alert("loaded!");
                  };

                xhr.setRequestHeader('Cache-Control','no-cache');
                xhr.send(fd);
                return;
                //while(xhr.readyState!=4){}
                //alert("oen over");
            }

            function uploadProgress(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
                }
                else {
                    document.getElementById('progressNumber').innerHTML = 'unable to compute';
                }
            }

            function uploadComplete(evt) {
                /* This event is raised when the server send back a response */
                alert(evt.target.responseText);
            }

            function uploadFailed(evt) {
                alert("There was an error attempting to upload the file.");
            }

            function uploadCanceled(evt) {
                xhr.abort();
                xhr = null;
                //alert("The upload has been canceled by the user or the browser dropped the connection.");
            }
        </script>
    </head>
    <body>
        <form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
            <div class="row">
                <label for="fileToUpload">Select a File to Upload</label><br />
                <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
                <input type="button" value="cancel"  onClick="uploadCanceled();"/>
            </div>
            <div id="fileName"></div>
            <div id="fileSize"></div>
            <div id="fileType"></div>
            <div class="row">
                <input type="button" onclick="sendRequest();" value="Upload" />
            </div>
            <div id="progressNumber"></div>
        </form>
    </body>
</html>

服务器上的代码

$target_path = "uploads/";
$tmp_name = $_FILES['fileToUpload']['tmp_name'];
$size = $_FILES['fileToUpload']['size'];
$name = $_FILES['fileToUpload']['name'];
$sports = $_GET['file'];
$part =(string)$_GET['num'];
//$part = split("/=/", $part);
$target_file = $target_path .$part. $sports;


// Open temp file
$out = fopen($target_file, "wb");

if ( $out ) {
    // Read binary input stream and append it to temp file
    $in = fopen($tmp_name, "rb");
    if ( $in ) {
        while ( $buff = fread( $in, 1048576 ) ) {
            fwrite($out, $buff);
        }   
    }
    fclose($in);
    fclose($out);
}

  ?>
答案

上面的代码中有一个小故障。你在while循环中调用uploadFile就像这样..

            while( start < SIZE ) {
                var chunk = blob.slice(start, BYTES_PER_CHUNK);
                //alert(chunk.size());
                uploadFile(chunk,part);
                //alert("here");
                start = start + BYTES_PER_CHUNK;
                part++;
            }

你不是在等待块加载成功!!你继续上传块直到结束。您可以等待一个块成功上载，然后加载下一个块。

我觉得你可以试试以下......

     var blob;
     var start;
     var part;
     var chunk;
     const SIZE = blob.size;
     var xhr;
     function sendRequest() {
            blob = document.getElementById('fileToUpload').files[0];
            const BYTES_PER_CHUNK = 1048576; // 1MB chunk sizes.
            const SIZE = blob.size;
            start = 0;                
            part = 0;
            xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "upload.php"+"?"+"file="+file.name+"&num=" + part);
            xhr.onload = function(e) {
              //alert("loaded!");
              };

            xhr.setRequestHeader('Cache-Control','no-cache');
            chunk = blob.slice(start, BYTES_PER_CHUNK);
            //alert(chunk.size());
            uploadFile(chunk,part);
            //alert("here");
            start = start + BYTES_PER_CHUNK;
            part++;                
        }
function uploadFile(blobFile,part) {
            var file = document.getElementById('fileToUpload').files[0];  
            var fd = new FormData();
            fd.append("fileToUpload", blobFile);


            xhr.send(fd);
            return;
            //while(xhr.readyState!=4){}
            //alert("oen over");
        }

function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            alert(evt.target.responseText);
            while( start < SIZE ) {
                chunk = blob.slice(start, BYTES_PER_CHUNK);
                //alert(chunk.size());
                uploadFile(chunk,part);
                //alert("here");
                start = start + BYTES_PER_CHUNK;
                part++;
            }
        }
另一答案

改变这个：

       var blob;
    var start;
    var end;
    var part;
    var SIZE;
    var BYTES_PER_CHUNK;
    var xhr;


 function sendRequest() {

         blob = document.getElementById('fileToUpload').files[0];
      //  var file = document.getElementById('fileToUpload').files[0];

         BYTES_PER_CHUNK = 1048576; // 1MB chunk sizes.
         SIZE = blob.size;
        start = 0;                
        part = 0;
        end = BYTES_PER_CHUNK;



        while( start < SIZE ) {
                var chunk = blob.slice(start, end);
                //alert(chunk.size());
                 alert(start + ' - ' + end );
                uploadFile(chunk,part);
                //alert("here");

                 start = end;
                 end = start + BYTES_PER_CHUNK;
                part++;
            }

    }
另一答案

我找到了正确的javascript代码:( PHP工作正常）

window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var blob;
var start;
var end;
var part;
var SIZE;
var BYTES_PER_CHUNK;
var xhr;
var chunk;

function sendRequest() {

    blob = document.getElementById('fileToUpload').files[0];
        BYTES_PER_CHUNK = 1048576; // 1MB chunk sizes.
        SIZE = blob.size;
        start = 0;                
        part = 0;
        end = BYTES_PER_CHUNK;

    chunk = blob.slice(start, end);
    uploadFile(chunk,part);
    start = end;
    end = start + BYTES_PER_CHUNK;
    part = part + 1;



};
//------------------------------------------------------------------------------------------------------------------------------------

function fileSelected() {
    var file = document.getElementById('fileToUpload').files[0];
            if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
            }
};
//------------------------------------------------------------------------------------------------------------------------------------

function uploadFile(blobFile,part) {
            var file = document.getElementById('fileToUpload').files[0];  
            var fd = new FormData();
            fd.append("fileToUpload", blobFile);

            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);


            var php_file =  "/upload.php"

            xhr.open("POST", php_file +"?"+"file="+file.name+"&num=" + parseInt(part) );
            xhr.onload = function(e) {
              //alert("loaded!");
              };

            xhr.setRequestHeader('Cache-Control','no-cache');
            xhr.send(fd);
            return;

};
//------------------------------------------------------------------------------------------------------------------------------------

function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + "%";
            }
            else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
    };
//------------------------------------------------------------------------------------------------------------------------------------

function uploadComplete(evt) {
            // This event is raised when the server send back a response 
            //alert(evt.target.responseText);


    if( start < SIZE ) {
            chunk = blob.slice(start, end);

            uploadFile(chunk,part);

            start = end;
            end = start + BYTES_PER_CHUNK;
            part = part + 1;
            }
};
//------------------------------------------------------------------------------------------------------------------------------------


function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
};
//------------------------------------------------------------------------------------------------------------------------------------

function uploadCanceled(evt) {
            xhr.abort();
            xhr = null;
            alert("The upload has been canceled by the user or the browser dropped the connection.");
};
//------------------------------------------------------------------------------------------------------------------------------------
另一答案

其余部分未上传的原因是切片循环不正确。把它改成以下你应该是金色的。

var start = 0;
var end = BYTES_PER_CHUNK;
var part = 0;
while( start < SIZE ) {
    var chunk = blob.slice(start, end);
    uploadFile(chunk,part);
    start = end;
    end = start + BYTES_PER_CHUNK;
    part++;
}

以上是关于Javascript大文件上传器的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 大文件上传解决方案(500M以上)

js分片上传大文件，前端代码

大文件上传下载实现思路，分片断点续传代码实现，以及webUpload组件

PHP,javascript实现大文件上传

什么是最好的多文件 JavaScript / Flash 文件上传器？

JavaScript大文件分片上传/多线程上传