PHP - HTML5 API 上传损坏

Question

Anyone can help me with my code?任何人都可以帮助我处理我的代码吗？ I wanna build an upload function using HTML5 API.我想使用 HTML5 API 构建上传功能。 if I upload less than 1mb the file is alright.如果我上传的文件小于 1mb，则文件没问题。 However, if file more than 1mb the file will be corrupted.但是，如果文件超过 1mb，文件将被损坏。

the HTML file : HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Upload</title>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    </head>
    <body>
        <form method="POST" action="upload.php" enctype='multipart/form-data'>
            <input type="file" name="fileToUpload" id="file"><br />
            <input type="submit" id="submit">
        </form>
    </body>


<script>
    $(document).ready(function(){
        $('#submit').on('click', function(e){
            e.preventDefault();
            sendRequest();
        });

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

        var bytes_per_chunk = 1048576; // 1mb chunk sizes.
        var global_upload_counter = 0;

        function sendRequest(){
            var blob = document.getElementById('file').files[0];
            var total_size = blob.size;

            var start = 0;
            var end = bytes_per_chunk;
            // var counter = 1;
            while(start < total_size)
            {
                // console.log('start : ' + start + ', end :' + end + ' and counter : ',  counter);
                var chunk = blob.slice(start, end);
                uploadFile(chunk, blob.name);
                start = end;
                end = start + bytes_per_chunk;
                //counter++;
            }

        }

        function uploadFile(chunk, filename){
            var fd = new FormData();
            fd.append('fileToUpload', chunk);

            var xhr = new XMLHttpRequest();

            xhr.addEventListener('load', uploadComplete, false);
            xhr.addEventListener('error', uploadFailed, false);
            xhr.addEventListener('abort', uploadCanceled, false);

            xhr.open('POST', 'upload.php?filename=' + filename);
            xhr.send(fd);

        }

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

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

        function uploadCanceled(evt) {
            xhr.abort();
            xhr = null;
        }
    });
    </script>
</html>

PHP code (upload.php): PHP代码（上传.php）：

<?php

$target_path = "upload/";

$tmp_name = $_FILES['fileToUpload']['tmp_name'];
$size = $_FILES['fileToUpload']['size'];
$name = $_FILES['fileToUpload']['name'];
$filename =  $_GET['filename'];

//$target_file = $target_path.$name;

$complete = $target_path. $filename;

// append; open or create binary file for writing at end-of-file
$com = fopen($complete, "ab");
error_log($target_path);

// read as binary
$in = fopen($tmp_name, "rb");
if($in){
    while ($buff = fread($in, $size)){
        fwrite($com, $buff);
    }
}
fclose($in);

Answer 1

First of all, why do you want to separate the file into chunks?首先，为什么要将文件分成块？ You can upload the whole file in a go via AJAX.您可以通过 AJAX 一次性上传整个文件。 The error that you are encountering might be due to the chunk logic.您遇到的错误可能是由于块逻辑造成的。 Try removing the chunk logic and it will work just fine.尝试删除块逻辑，它会工作得很好。 So your upload function would look something like this:所以你的上传功能看起来像这样：

$(document).ready(function(){
        $('#submit').on('click', function(e){
            e.preventDefault();
            sendRequest();
        });

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

        var bytes_per_chunk = 1048576; // 1mb chunk sizes.
        var global_upload_counter = 0;

        function sendRequest(){
            var blob = document.getElementById('file').files[0];
            var total_size = blob.size;

            uploadFile(blob,filename);
        }

        function uploadFile(chunk, filename){
            var fd = new FormData();
            fd.append('fileToUpload', chunk);

            var xhr = new XMLHttpRequest();

            xhr.addEventListener('load', uploadComplete, false);
            xhr.addEventListener('error', uploadFailed, false);
            xhr.addEventListener('abort', uploadCanceled, false);

            xhr.open('POST', 'upload.php?filename=' + filename);
            xhr.send(fd);

        }

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

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

        function uploadCanceled(evt) {
            xhr.abort();
            xhr = null;
        }
    });

Instead of chunks, send the full file and it should work.发送完整文件而不是块，它应该可以工作。 If you are worried about the upload progress, here are a few solutions: jQuery Upload Progress and AJAX file upload , File upload progress bar with jQuery如果你担心上传进度，这里有几个解决方案： jQuery Upload Progress and AJAX file upload , File upload progress bar with jQuery

Answer 2

Looking at the answer provided by user470714 on uploading a file in chunks using html5 I found the issues.查看 user470714 提供的关于使用 html5 分块上传文件的答案，我发现了问题。

Which the ajax didn't actually uploading the chunks in order. ajax实际上并没有按顺序上传块。 So I updated my HTML code as follow and now it works fine :所以我更新了我的 HTML 代码如下，现在它工作正常：

<!DOCTYPE html>
<html>
    <head>
        <title>Upload</title>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    </head>
    <body>
        <form method="POST" action="upload.php" enctype='multipart/form-data'>
            <input type="file" name="fileToUpload" id="file"><br />
            <input type="submit" id="submit">
        </form>
    </body>

<script>
    $(document).ready(function(){
        $('#submit').on('click', function(e){
            e.preventDefault();
            sendRequest();
        });

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

        var bytes_per_chunk = 1048576; // 1mb chunk sizes.
        var global_upload_counter = 0;


        function sendRequest(){
            var blob = document.getElementById('file').files[0];

            var total_size = blob.size;

            window.upload_counter  = 0;
            window.upload_filearray = [];


            var start = 0;
            var end = bytes_per_chunk;
            while(start < total_size)
            {
                var chunk = blob.slice(start, end);

                window.upload_filearray[window.upload_counter] = chunk;
                window.upload_counter++;

                start = end;
                end = start + bytes_per_chunk;

            }

            // initiate upload the first time
            window.upload_counter = 0;
            window.filename = blob.name;
            uploadFile(window.upload_filearray[window.upload_counter]);

        }


        function uploadFile(chunk){
            var fd = new FormData();
            fd.append('fileToUpload', chunk);

            var xhr = new XMLHttpRequest();

            xhr.addEventListener('load', uploadComplete, false);
            xhr.addEventListener('error', uploadFailed, false);
            xhr.addEventListener('abort', uploadCanceled, false);

            xhr.open('POST', 'upload.php?filename=' + window.filename);

            window.upload_counter++;

            xhr.send(fd);

        }

        function uploadComplete(evt) {
            // This event is raised when the server send back a response 
            if (evt.target.responseText != ""){
                console.log(evt.target.responseText);
            }

            if(window.upload_filearray.length > window.upload_counter){
                uploadFile(window.upload_filearray[window.upload_counter]);
            }
        }

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

        function uploadCanceled(evt) {
            xhr.abort();
            xhr = null;
        }


    });
    </script>
</html>

PHP - HTML5 API 上传损坏

问题描述

2 个解决方案

解决方案1
1 2015-04-15 09:04:13

解决方案2
0 已采纳 2015-04-16 01:47:31

PHP - HTML5 API 上传损坏

问题描述

2 个解决方案

解决方案1 1 2015-04-15 09:04:13

解决方案2 0 已采纳 2015-04-16 01:47:31

解决方案1
1 2015-04-15 09:04:13

解决方案2
0 已采纳 2015-04-16 01:47:31