HTML5中如何實現(xiàn)文件上傳

這篇“HTML5中如何實現(xiàn)文件上傳”文章,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要參考一下,對于“HTML5中如何實現(xiàn)文件上傳”,小編整理了以下知識點,請大家跟著小編的步伐一步一步的慢慢理解,接下來就讓我們進入主題吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、新平網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為新平等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

html是什么

html的全稱為超文本標記語言,它是一種標記語言,包含了一系列標簽.通過這些標簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體,html文本是由html命令組成的描述性文本,html命令可以說明文字,圖形、動畫、聲音、表格、鏈接等,主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

  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發(fā)送二進制數(shù)據(jù),文件信息拼接在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){
    // 獲取二進制數(shù)據(jù)
    $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;       // 總塊數(shù)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();
    }    /**
     * 創(chuàng)建文件夾
     * @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);
        }
    }    /**
     * 結(jié)果返回
     * @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;
    }
}

接口調(diào)用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);

以上是“HTML5中如何實現(xiàn)文件上傳”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

當前標題:HTML5中如何實現(xiàn)文件上傳
文章位置:http://www.muchs.cn/article44/ghosee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、用戶體驗、企業(yè)網(wǎng)站制作、網(wǎng)站維護、服務(wù)器托管、建站公司

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)