HTML5文件上传的代码
-
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);
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbhgfb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24