个人中心
gpt4 book ai didi

php - 使用 html5 分块上传文件

转载 作者：IT王子 更新时间：2023-10-28 23:50:09 32 4
gpt4 key购买 nike

我正在尝试使用 html5 的文件 API 分 block 上传文件，然后在服务器端用 php 重新组装它。我正在上传一个视频，但是当我在服务器端合并文件时，文件大小增加了，它变成了一个无效文件。请注意以下 html5 代码仅适用于浏览器 chrome。在 Chrome 9 中测试，因为它使用文件 API 的 slice 函数。有人可以指导我吗？谢谢

PHP 源码

<?php

$target_path = "uploads/";
$tmp_name = $_FILES['fileToUpload']['tmp_name'];
$size = $_FILES['fileToUpload']['size'];
$name = $_FILES['fileToUpload']['name'];


$target_file = $target_path . basename($name);


$complete = "complete.mov";
$com = fopen("uploads/".$complete, "ab");
error_log($target_path);

// 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);
            fwrite($com, $buff);
        }   
    }
    fclose($in);
    fclose($out);
}
fclose($com);

?>

HTML 源代码

<!DOCTYPE html>
<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 end = BYTES_PER_CHUNK;
                while( start < SIZE ) {
                    var chunk = blob.slice(start, end);
                    uploadFile(chunk);
                    start = end;
                    end = start + BYTES_PER_CHUNK;
                }
            }

            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) {
                //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");
                xhr.onload = function(e) {
                  alert("loaded!");
                  };

                xhr.send(fd);
                //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>

最佳答案

我试图解决这个问题，发现了以下东西，希望对你有用:

1) 您用于切片文件的 JS 函数已弃用。我正在运行 Chrome v14，但控制台无法识别它。在我可以做任何事情之前，我必须将其更改为:

var chunk = blob.webkitSlice(start, end);

2) 我尝试了小得多的文件(大约 10MB)，但遇到了类似的问题 - 我的视频在上传后总是损坏。当我比较原始文件和“副本”时，我注意到一件奇怪的事情:文件的各个部分似乎只是混淆了 - 它们都在那里，但顺序错误。

我怀疑您当前的程序遇到的一个问题是没有采取措施确保文件以正确的顺序组装。我相信正在发生的事情是您的 JS 多次运行 uploadFile，没有等待之前的上传完成，并且服务器尝试按照接收到的顺序组装文件，但这与发送文件的顺序不同.

我能够通过让您的代码正常工作(稍加修改，拼凑在一起作为概念证明)来证明这一点，方法是在收到每个文件时为其分配一个序列号，然后在收到所有部分后将它们组装起来为了。这样做之后，我就可以播放我上传的视频文件了。

我认为您将不得不采取类似的措施。接收所有文件 block ，然后组装它们，或者至少确保您采取必要措施按顺序组装它们。我不确定为什么你的文件会变大(我很早就观察到了这种现象)，所以我怀疑这只是一些奇怪的副作用，否则不会同步文件 block 。

您将立即遇到的一个困难是 Javasacript 中的 Blob 对象不支持更改或设置文件名，因此您不能在客户端以这种方式为文件提供唯一标识符。作为一个简单的解决方法，我所做的如下:

            var i = 1;
            while( start < SIZE ) {
                var chunk = blob.webkitSlice(start, end);
                uploadFile(chunk, i);
                i++;

                start = end;
                end = start + BYTES_PER_CHUNK;
            }


function uploadFile(blobFile, part) {
     ....
     xhr.open("POST", "test.php?num=" + part);
     ....
}

正如您可能在服务器端猜到的那样，我刚刚使用该 GET 变量分配标识符，并将其用作需要在服务器上完成的任何其他处理的基础。

无论如何，这并没有直接解决文件大小增长的问题，所以我只能希望这对你有所帮助；我很想看看你还能发现什么!

关于php - 使用 html5 分块上传文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7853467/

32 4 0
文章推荐： mysql - rails 中的多个表连接
文章推荐： android - SCAN_RESULTS_AVAILABLE_ACTION 在 Android 6.0 中返回空列表
文章推荐： mysql - SQL 拆分逗号分隔行
文章推荐： Android SQLite 自动增量
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com