使用 html5 分块上传文件 [英] uploading a file in chunks using html5

查看：25
本文介绍了使用 html5 分块上传文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

PHP 源码

HTML 源代码

<头><title>使用 XMLHttpRequest 上传文件</title><script type="text/javascript">window.BlobBuilder = window.MozBlobBuilder ||window.WebKitBlobBuilder ||窗口.BlobBuilder;函数发送请求(){var blob = document.getElementById('fileToUpload').files[0];const BYTES_PER_CHUNK = 1048576;//1MB 块大小.const SIZE = blob.size;无功开始= 0;var end = BYTES_PER_CHUNK;而(开始<大小){var chunk = blob.slice(start, end);上传文件(块)；开始=结束；结束 = 开始 + BYTES_PER_CHUNK;}}函数文件选择(){var file = document.getElementById('fileToUpload').files[0];如果(文件){变量文件大小 = 0;如果(文件大小 > 1024 * 1024)fileSize = (Math.round(file.size * 100/(1024 * 1024))/100).toString() + 'MB';别的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;}}函数上传文件(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 = 函数(e){警报(加载！")；};xhr.send(fd);//警报(结束")；}函数上传进度(evt){如果(evt.lengthComputable){var percentComplete = Math.round(evt.loaded * 100/evt.total);document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';}别的 {document.getElementById('progressNumber').innerHTML = '无法计算';}}函数上传完成(evt){/* 当服务器发回响应时引发此事件 */警报(evt.target.responseText)；}功能上传失败(evt){alert("尝试上传文件时出错.");}功能上传取消(evt){xhr.abort();xhr = 空；//alert("上传已被用户取消或浏览器断开连接.");}<身体><form id="form1" enctype="multipart/form-data" method="post" action="upload.php"><div class="row"><label for="fileToUpload">选择要上传的文件</label><br/><input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/><input type="button" value="cancel" onClick="uploadCanceled();"/>

<div id="文件名"></div><div id="文件大小"></div><div id="文件类型"></div><div class="row"><input type="button" onclick="sendRequest();"值=上传"/>

<div id="progressNumber"></div></表单>

解决方案

Slice 函数接受第二个参数作为长度.其中 mozSlice 接受第二个参数作为结束

I am trying to upload a file in chunks using html5's File API and then reassembling it on the server side in php. I am uploading a video but when i merge the files in server side the size has increased and it is becoming a invalid file . Please note the below html5 code only works in browser chrome . Tested in Chrome 9 as this uses file API's slice function . Can some one guide me on this ? Thanks

PHP source

<?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 Source

<!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>

解决方案

Slice Function accepts the second parameter as length . Where as mozSlice accepts second parameter as end

这篇关于使用 html5 分块上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆