时间:2021-07-01 10:21:17 帮助过:55人阅读
这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。
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);
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中文件上传的代码的详细内容,更多请关注Gxl网其它相关文章!