HTML5中如何實(shí)現(xiàn)文件上傳
這篇“HTML5中如何實(shí)現(xiàn)文件上傳”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“HTML5中如何實(shí)現(xiàn)文件上傳”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。
成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、新平網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、成都商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為新平等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
html是什么
html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。
XHR2上傳二進(jìn)制文件
html代碼：
<input type="file" onchange="handleUpload()">
javascript代碼:
function handleUpload(){
var file = document.querySelector('input[type=file]').files[0];
if(!!file) {
var reader = new FileReader(); // 讀取文件二進(jìn)制
reader.readAsArrayBuffer(file);
reader.onload = function() {
upload(this.result, file.name);
}
}
}function upload(binary, filename){
var xhr = new XMLHttpRequest(); // 通過(guò)post發(fā)送二進(jìn)制數(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){
// 獲取二進(jìn)制數(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, // 當(dāng)前上傳塊
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(); // 表單對(duì)象
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; // 臨時(shí)文件
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);
}
} /**
* 移動(dòng)文件
*/
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中如何實(shí)現(xiàn)文件上傳”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前標(biāo)題：HTML5中如何實(shí)現(xiàn)文件上傳
文章位置：http://jinyejixie.com/article44/ghosee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、用戶體驗(yàn)、企業(yè)網(wǎng)站制作、網(wǎng)站維護(hù)、服務(wù)器托管、建站公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
