首頁 > web前端 > H5教程 > 主體

HTML5中檔案上傳的程式碼

不言
發布: 2018-08-06 17:44:43
原創
5246 人瀏覽過

這篇文章要跟大家分享的內容是關於HTML5中檔案上傳的程式碼,有一定的參考價值,有需要的朋友可以從參考一下,希望對你有幫助。

  1. XHR2上傳二進位檔案

html程式碼:

<input type="file" onchange="handleUpload()">
登入後複製

javascript程式碼:

function handleUpload(){
    var file = document.querySelector(&#39;input[type=file]&#39;).files[0];    
    if(!!file) {        
    var reader = new FileReader();        // 读取文件二进制
        reader.readAsArrayBuffer(file);
        reader.onload = function() {
            upload(this.result, file.name);
        }
    }
}function upload(binary, filename){
    var xhr = new XMLHttpRequest();    // 通过post发送二进制数据,文件信息拼接在url
    xhr.open(&#39;POST&#39;, &#39;./upload.php?filename=&#39; + filename);
    xhr.overrideMimeType("application/octet-stream");    
    if(xhr.sendAsBinary) {
        xhr.sendAsBinary(binary);
    }else {
        xhr.send(binary);
    }

    xhr.onload = function() {
        var res = JSON.parse(xhr.response);        
        if(res.status === &#39;success&#39;) {
            alert(&#39;上传成功&#39;);
        }else {
            alert(&#39;上传失败&#39;);
        }
    }
}
登入後複製

php程式碼:

<?php
$result = new stdClass();
$fileName = $_GET[&#39;filename&#39;];
$filePath = &#39;./document/&#39;;
function binary_to_file($fileName){
    // 获取二进制数据
    $content = file_get_contents(&#39;php://input&#39;);    
    if(empty($content)) {        
    $content = $GLOBALS[&#39;HTTP_RAW_POST_DATA&#39;];
    }    
    $res = file_put_contents($GLOBALS[&#39;filePath&#39;] . $fileName, $content, true);    
    return $res;
}if(binary_to_file($fileName) === FALSE) {    
$result->status = &#39;error&#39;;
}else {    
$result->status = &#39;success&#39;;
}echo json_encode($result);
登入後複製

2.HTML5 大檔案分片上傳

javascript程式碼:

const LENGTH = 10*1024;  // 每次上传10kbvar file,
    chunks = [],
    index = 1,   // 当前上传块
    total;       // 总块数function handleUpload() {
    file = document.querySelector(&#39;[type=file]&#39;).files[0];
    total = Math.ceil(file.size / LENGTH);    for(var i = 0; i < total; i++) {
        chunks[i] = file.slice(i*LENGTH, (i+1)*LENGTH);
    }

    upload(chunks, index, total, polling);
}function upload(chunks, index, total, callback) {
    var xhr = new XMLHttpRequest(),
        chunk = chunks[index - 1],
        formData = new FormData();    // 表单对象
    formData.append(&#39;file&#39;, chunk);
    formData.append(&#39;index&#39;, index);
    formData.append(&#39;total&#39;, total);
    formData.append(&#39;filename&#39;, file.name);

    xhr.open(&#39;POST&#39;, &#39;./upload.php&#39;);
    xhr.send(formData);

    xhr.onload = function() {
        var res = JSON.parse(xhr.response);        if(typeof callback == &#39;function&#39;) {
            callback.call(this, res, chunks, index, total);
        }
    }
}function polling(res, chunks, index, total){
    if(res.isFinish) {
        alert(&#39;上传成功&#39;)
    }else {
        console.log(res.progress);
        upload(chunks, index + 1, total, polling);
    }
}
登入後複製

php程式碼:

檔案上傳類別#FileUpload.php

<?php

class FileUpload
{    
private $index;    
private $total;    
private $filename;    
private $filePath = &#39;./document/&#39;;    
private $file;    
private $tmpFile;    // 临时文件

    function __construct($tmpFile, $index, $total, $filename)
    {
        $this->index = $index;
        $this->total = $total;
        $this->filename = $filename;
        $this->tmpFile = $tmpFile;

        $this->move_file();
    }    /**
     * 创建文件夹
     * @return bool
     */
    public function touch_dir()
    {        if(!file_exists($this->filePath)) {            
    return mkdir($this->filePath);
        }
    }    /**
     * 移动文件
     */
    public function move_file()
    {
        $this->touch_dir();
        $this->file = $this->filePath . $this->filename . &#39;_&#39; . $this->index;
        move_uploaded_file($this->tmpFile, $this->file);
    }    /**
     * 合并文件
     */
    public function merge_file()
    {        if($this->index == $this->total) {
            $mergeFile = $this->filePath . $this->filename;            
            for($i = 1; $i <= $this->total; $i++) {
                $chunk = file_get_contents($mergeFile.&#39;_&#39;.$i);
                file_put_contents($mergeFile, $chunk, FILE_APPEND);
            }
            $this->del_file();
        }
    }    /**
     * 删除文件
     */
    public function del_file()
    {        for($i = 1; $i <= $this->total; $i++) {
            $delFile = $this->filePath . $this->filename. &#39;_&#39; . $i;            
            @unlink($delFile);
        }
    }    /**
     * 结果返回
     * @return stdClass
     */
    public function getReturn()
    {
        $result = new stdClass();        
        if($this->index == $this->total) {
            $result->isFinish = TRUE;
            $this->merge_file();
        }else {
            $result->progess = ($this->index / $this->total);
        }        return $result;
    }
}
登入後複製

介面呼叫upload.php

<?php
require &#39;./FileUpload.php&#39;;
$fileUpload = new FileUpload($_FILES[&#39;file&#39;][&#39;tmp_name&#39;], 
$_POST[&#39;index&#39;], 
$_POST[&#39;total&#39;], 
$_POST[&#39;filename&#39;]);
$result = $fileUpload->getReturn();
echo json_encode($result);
登入後複製

相關文章建議:

css box-sizing屬性(盒子模型)的用法介紹

html5中video(視訊)元素的分析

HTML5實作魔術方塊遊戲的程式碼

以上是HTML5中檔案上傳的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!