6

コードをオンラインでコピーして、大きなファイルをサーバーにアップロードしました。基本的に、大きなファイルをチャンクに分割して送信し、個別に終了します。したがって、最初のチャンクはサーバーに正常に送信されますが、残りは機能しません。どの段階で問題が発生するのかわかりません。誰か助けてください。

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

  ?>
4

6 に答える 6

2

上記のコードに不具合があります。このように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++;
            }

チャンクが正常にロードされるのを待っていません!! 最後までチャンクをアップロードし続けます。1つのチャンクが正常にアップロードされるのを待ってから、次のチャンクをロードできます。

次のことを試してみてください。

     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++;
            }
        }
于 2012-12-10T08:41:40.950 に答える
0

私は正確な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.");
};
//------------------------------------------------------------------------------------------------------------------------------------
于 2015-01-05T10:37:13.903 に答える
0

これを変える：

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

    }
于 2014-02-03T16:08:15.183 に答える