HTML5 文件上传

1.XHR2上传二进制文件

html代码：

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

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

php代码:

<?php

$result = new stdClass();
$fileName = $_GET['filename'];
$filePath = './document/';

function binary_to_file($fileName)
{
    // 获取二进制数据
    $content = file_get_contents('php://input');
    if(empty($content)) {
        $content = $GLOBALS['HTTP_RAW_POST_DATA'];
    }

    $res = file_put_contents($GLOBALS['filePath'] . $fileName, $content, true);
    return $res;
}

if(binary_to_file($fileName) === FALSE) {
    $result->status = 'error';
}else {
    $result->status = 'success';
}

echo json_encode($result);

2.HTML5 大文件分片上传

javascript代码:

const LENGTH = 10*1024;  // 每次上传10kb
var 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('file', chunk);
    formData.append('index', index);
    formData.append('total', total);
    formData.append('filename', file.name);

    xhr.open('POST', './upload.php');
    xhr.send(formData);

    xhr.onload = function() {
        var res = JSON.parse(xhr.response);
        if(typeof callback == 'function') {
            callback.call(this, res, chunks, index, total);
        }
    }
}

function polling(res, chunks, index, total)
{
    if(res.isFinish) {
        alert('上传成功')
    }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 = './document/';
    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 . '_' . $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.'_'.$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. '_' . $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 './FileUpload.php';

$fileUpload = new FileUpload($_FILES['file']['tmp_name'], $_POST['index'], $_POST['total'], $_POST['filename']);
$result = $fileUpload->getReturn();

echo json_encode($result);