html5+jQuery文件分块上传
时间:2019-07-27 01:50:39浏览:2697
前端代码:
<input type="file" id="file6" multiple>
<button type="button" class="btnFile6">分片上传6</button>
<div class="result"></div>
//方式6
$(".btnFile6").click(function () {
var upload = function (file, skip) {
var formData = new FormData();//初始化一个FormData对象
var blockSize = 1000000;//每块的大小
var nextSize = Math.min((skip + 1) * blockSize, file.size);//读取到结束位置
var fileData = file.slice(skip * blockSize, nextSize);//截取 部分文件 块
formData.append("file", fileData);//将 部分文件 塞入FormData
formData.append("fileName", file.name);//保存文件名字
$.ajax({
url: "/Home/SaveFile6",
type: "POST",
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (responseText) {
$(".result").html("已经上传了" + (skip + 1) + "块文件");
if (file.size <= nextSize) {//如果上传完成,则跳出继续上传
alert("上传完成");
return;
}
upload(file, ++skip);//递归调用
}
});
};
var file = $("#file6")[0].files[0];
upload(file, 0);
});
后端代码:
<?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);
以上代码是基础的html5+jQuery分块上传程序,前端可以继续优化,加入上传进度,后端需要判断文件类型,另存文件名,另存的时候不能直接写入,需要判断文件大小,需要在前端加上formData.append("fileSize", file.size); //文件大小传过来再判断已经写入的文件大小是否等于js传来的大小,等于则说明文件已经上传完了,这个时候才可以改名,否则文件写一块就改名,要出错,前端上传按钮可以美化,最终效果
上一篇:css input[type=file] 样式美化,input上传按钮美化
下一篇:一个PHP文件搞定微信H5支付
- Linux文章
- PHP文章
- 随机文章
- Linux中的find(-atime...
- mysql的expire_logs_...
- PHP 扩展 libsodium s...
- Linux下利用find和cp实现筛...
- 使用mysqldump命令导出备份m...
- Linux系统如何设置开机自动运行脚...
- Linux上实现秒级执行的定时任务
- shell echo -e 颜色输出
- Linux下通过grep查找指定的进...
- 解决执行脚本报syntax erro...
发表评论
昵称: 验证码: