HTML5中文件上传的代码-

这篇文章给大家分享的内容是关于HTML5中文件上传的代码，有一定的参考价值，有需要的朋友可以从参考一下，希望对你有所帮助。

1. XHR2上传二进制文件

html代码：

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代码:

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 
php代码：
文件上传类 FileUpload.php 
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：
getReturn();
echo json_encode($result);
相关文章推荐：
css box-sizing属性（盒子模型）的用法介绍
html5中video（视频）元素的分析
HTML5实现魔方游戏的代码
以上就是HTML5中文件上传的代码的详细内容，更多请关注 第一PHP社区 其它相关文章！