Le contenu de cet article concerne le code de téléchargement de fichiers en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
code html :
<input type="file" onchange="handleUpload()">
code 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('上传失败'); } } }
Code 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);
Code 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); } }
Code php :
Classe de téléchargement de fichiers 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; } }
appel d'interfaceupload.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);
Articles connexes recommandés :
attribut css box-sizing (box modèle ) Introduction à l'utilisation
Analyse de l'élément vidéo (vidéo) en html5
Code HTML5 pour implémenter le jeu Rubik's Cube
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!