js实现大文件分片上传的方法
2024-08-28 19:47:07
借助js的Blob对象FormData对象可以实现大文件分片上传的功能,关于Blob和FormData的具体使用方法可以到如下地址去查看
FormData 对象的使用
Blob 对象的使用
以下是实现代码,本例中后端代码使用php来实现,只是演示基本功能,具体一些文件验证逻辑先忽略。
前段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>upload</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<button id="upload" onClick="upload()">upload</button>
<script type="text/javascript">
var bytesPerPiece = 1024 * 1024; // 每个文件切片大小定为1MB .
var totalPieces;
//发送请求
function upload() {
var blob = document.getElementById("file").files[0];
var start = 0;
var end;
var index = 0;
var filesize = blob.size;
var filename = blob.name; //计算文件切片总数
totalPieces = Math.ceil(filesize / bytesPerPiece);
while(start < filesize) {
end = start + bytesPerPiece;
if(end > filesize) {
end = filesize;
} var chunk = blob.slice(start,end);//切割文件
var sliceIndex= blob.name + index;
var formData = new FormData();
formData.append("file", chunk, filename);
$.ajax({
url: 'http://localhost:9999/test.php',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
}).done(function(res){ }).fail(function(res) { });
start = end;
index++;
}
}
</script>
</body>
</html>
后端php代码:
<?php header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); $file = $_FILES['file'];
$filename = $file['name'];
file_put_contents($filename, file_get_contents($file['tmp_name']), FILE_APPEND);
最新文章
- JQuery的ajax
- bootstrap-15
- 11.2---字符串数组排序,删除变位词(CC150)
- JVM笔记7:类加载器
- jquery easyui动态校验,easyui动态验证
- Tiny并行计算框架之复杂演示样例
- 实验数据结构——KMP算法Test.ming
- 汉字转全拼音函数优化方案(SQLServer),值得你看看
- (二十一)即时通信的聊天气泡的实现II
- 微信小程序页面跳转方法和携带参数详解
- Java bean 转 Map
- c复杂函数指针
- MT【245】小概率事件
- 点评qq浏览器
- Maven相关问题解决.docx
- 线程---local数据隔离
- python脚本删除文件与目录的命令
- 36、TreeSet详解
- 将h264和aac码流合成flv文件
- jquery Promise和ES6 Promise的区别