Question

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

<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);
}

  ?>

Answer 1

上面的代码中有一个小故障。你在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++;
            }

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

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

     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++;
            }
        }

Answer 2

这里的 .JS 脚本，成功上传块中的 blob。

window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
        var blob; var blob_1;
        var start; var end;
        var num; var part;
        var SIZE; var size; var fileSize = 0;
        var BYTES_PER_CHUNK; var NUM_CHUNKS; var chunk; var chunk_size = 0;
        var xhr; var counter = 0;
        
        function sendRequest() {

            blob = document.getElementById('file').files[0];
            // blob = new Blob(blob_1, {type: 'video/mp4'}); 
                const BYTES_PER_CHUNK = 1048576; // 1MB chunk sizes.
                const SIZE = blob.size;
                var i = 0;
                var start = 0;
                var end = BYTES_PER_CHUNK;
                var part = 0;
                var NUM_CHUNKS = Math.max(Math.ceil(SIZE / BYTES_PER_CHUNK), 1);
                
                while( start < SIZE ) {
                    var chunk = blob.slice(start, end);
                    uploadFile(chunk,part);
                    start = end;
                    end = start + BYTES_PER_CHUNK;
                    part++; counter++;
                }
        };

        function fileSelected() {
            var file = document.getElementById('file').files[0];
            if (file) {
                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('file').files[0];  
            var fd = new FormData();
            fd.append("file", blobFile);  fd.append("chunk_num", NUM_CHUNKS);  
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            
            xhr.open("POST", "uploadhandler.php"+"?"+"filen="+file.name+"&num="+part+"&counter="+counter);
            
            
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);

            
            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() + '%';
                document.getElementById('progressBar').style.backgroundColor="teal";                
            }else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }

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

                uploadFile(chunk,part);

                start = end;
                end = start + BYTES_PER_CHUNK;
                part = part + 1;
                
            }
            document.getElementById("msgStatus").innerHTML = evt.target.responseText;
            //alert("complete");
            
        }

        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.");
        }

这里的 .PHP 代码将每个块存储在“uploads/”文件夹中

session_start();

    $counter = 1;
    $_SESSION['counter'] = ($_REQUEST['num'] + 1);
  
  // changing the upload limits
   ini_set('upload_max_filesize', '100M');
   ini_set('post_max_size', '100M');
   ini_set('max_input_time', 300);
   ini_set('max_execution_time', 300);

    $filePath = "uploads/";
    if (!file_exists($filePath)) {
        if (!mkdir($filePath, 0777, true)) {
            echo "Failed to create $filePath";
        }
    }
    
    // $newfile = $newfile ."_". $_SESSION['counter'] .".mp4";
    $target_path = 'uploads/';
    $tmp_name = $_FILES['file']['tmp_name'];
    $filename = $_FILES['file']['name'];
    $newfile = substr(md5($_FILES['file']['name']), 0,10);
    $target_file = $target_path.$newfile;
    move_uploaded_file($tmp_name, $target_file.$_SESSION['counter'] );

B.U.T.以下 .PHP 代码不会合并块。

我真的不明白为什么它不适合阅读和写作...... 如果您有任何方法可以将这些块合并为一个完整的视频文件，请在此处同样发布您的回复。

// count number of uploaded chunks
    $chunksUploaded = 0;
    for ( $i = 1; $i <= $_SESSION['counter']; $i++ ) {
        if ( file_exists( $target_file.$i ) ) {
             $chunksUploaded++;
        }
    }

    // if ($chunksUploaded === $num_chunks) {
    if ($chunksUploaded === $_SESSION['counter']) {

        // here you can reassemble chunks together 
        // for ($i = 1; $i <= $num_chunks; $i++) {
        for ($i = 1; $i <= $_SESSION['counter']; $i++) {
            // echo $i ."\n";
          $file = fopen($target_file.$i, 'rb');
          $buff = fread($file, 1048576);
          fclose($file);

          $final = fopen($target_file, 'ab');
          $write = fwrite($final, $buff);
          fclose($final);

          unlink($target_file.$i);
        }
        
    }

希望您喜欢并感谢您的贡献。

Answer 3

Chage this：

       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++;
            }

    }

Answer 4

我找到了正确的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.");
};
//------------------------------------------------------------------------------------------------------------------------------------

Answer 5

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

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大文件上传器

5 个答案: