堆栈内存溢出
  繁体   English   中英

PHP - HTML5 API 上传损坏

[英]PHP - HTML5 API upload corrupted

 原文  2015-04-15 07:30:23  6   2    javascript/ php/ html

问题描述

任何人都可以帮助我处理我的代码吗？ 我想使用 HTML5 API 构建上传功能。 如果我上传的文件小于 1mb，则文件没问题。 但是，如果文件超过 1mb，文件将被损坏。

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代码（上传.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);

2 个解决方案

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

首先，为什么要将文件分成块？ 您可以通过 AJAX 一次性上传整个文件。 您遇到的错误可能是由于块逻辑造成的。 尝试删除块逻辑，它会工作得很好。 所以你的上传功能看起来像这样：

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

发送完整文件而不是块，它应该可以工作。 如果你担心上传进度，这里有几个解决方案： jQuery Upload Progress and AJAX file upload , File upload progress bar with jQuery

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

查看 user470714 提供的关于使用 html5 分块上传文件的答案，我发现了问题。

ajax实际上并没有按顺序上传块。 所以我更新了我的 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用HTML5 File API在PHP服务器上上传.xls文件 使用javascript和php上传HTML5图片 HTML5文件API使用Ajax上传多个图像 是否有HTML5文件API和上传的Javascript支持库？ 使用HTML5 File API将文件上传到RESTful Web服务 使用HTML5文件上传API恢复上传 - 使用.NET Core 2.0 Web api上传HTML5文件 如何使用HTML5 File API加密二进制文件并上传到服务器 使用HTML5 File API上传swf并获取宽度和高度 使用 html5/javascript 和 php 上传/更改头像照片？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM