Code für den Datei-Upload in HTML5

Der Inhalt dieses Artikels befasst sich mit dem Code zum Hochladen von Dateien in HTML5. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

1. XHR2-Binärdatei hochladen

HTML-Code:

<input type="file" onchange="handleUpload()">

Javascript-Code:

function handleUpload(){
    var file = document.querySelector('input[type=file]').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('POST', './upload.php?filename=' + 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 === 'success') {
            alert('上传成功');
        }else {
            alert('上传失败');
        }
    }
}

PHP-Code :

<?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 Große Datei mehrteilig hochladen

Javascript-Code:

const LENGTH = 10*1024;  // 每次上传10kbvar file,
    chunks = [],
    index = 1,   // 当前上传块
    total;       // 总块数function handleUpload() {
    file = document.querySelector('[type=file]').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-Code:

Datei-Upload-KlasseFileUpload.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;
    }
}

Schnittstellenaufrufupload.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);

Empfohlene verwandte Artikel:

Einführung in die Verwendung des CSS-Box-Sizing-Attributs (Box-Modell)

Analyse von Video-(Video-)Elementen in HTML5

HTML5-Code zur Implementierung des Zauberwürfelspiels

Das obige ist der detaillierte Inhalt vonCode für den Datei-Upload in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!