Code pour le téléchargement de fichiers en HTML5

Le contenu de cet article concerne le code de téléchargement de fichiers en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Fichier binaire de téléchargement XHR2

code html :

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

code javascript :

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('上传失败');
        }
    }
}

Code 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.Téléchargement de fichiers volumineux HTML5 en plusieurs parties

Code javascript :

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

Code php :

Classe de téléchargement de fichiers 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;
    }
}

appel d'interfaceupload.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);

Articles connexes recommandés :

attribut css box-sizing (box modèle ) Introduction à l'utilisation

Analyse de l'élément vidéo (vidéo) en html5

Code HTML5 pour implémenter le jeu Rubik's Cube

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!