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

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

相关文章推荐：

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

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

HTML5实现魔方游戏的代码

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