HTML5中文件上传的代码

这篇文章给大家分享的内容是关于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;
      // 每次上传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('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

?phpclass 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：

?phprequire './FileUpload.php';
    $fileUpload = new FileUpload($_FILES['file']['tmp_name'], $_POST['index'], $_POST['total'], $_POST['filename']);
    $result = $fileUpload->
    getReturn();
    echo json_encode($result);
    

相关文章推荐：

css box-sizing属性（盒子模型）的用法介绍

html5中video（视频）元素的分析

HTML5实现魔方游戏的代码

以上就是HTML5中文件上传的代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！