当前位置:首页 > 前端 >

html5+jQuery文件分块上传

时间:2019-07-27 01:50:39浏览:2265 转载

前端代码:
<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支付

发表评论

昵称:  验证码:

关于博主

博主

博主:BlueCode

职业:web程序

简介:2002年开始一直从事Web制作,网站运营,会PHP+MYSQL ASP+MSSQL,微信开发