开发ZUI H5大文件分块上传功能
ZUI H5大文件分块上传开发是一种技术，它允许用户将大文件分成多个小块进行上传。这种技术可以提高上传速度，减少服务器压力，并提高用户体验。在开发过程中，可以使用HTML5的File API和XMLHttpRequest对象来实现文件分块上传。首先，需要获取文件的总大小和每个分块的大小，然后使用File API读取文件内容并将其分割成多个小块。接着，使用XMLHttpRequest对象将这些小块逐个发送到服务器。最后，在服务器端将这些小块合并成一个完整的文件。
前端代码
使用file.slice将文件进行分割，然后分别进行异步上传。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title><%=title%></title><!--zui--><linkrel="stylesheet"href="http://zui.sexy/dist/css/zui.min.css"rel="externalnofollow"></head><body><divstyle="margin-top:30px;"><formmethod="post"enctype="multipart/form-data"><div><inputtype="file"id="fileBig"></div><buttontype="submit"class="btnbtn-primary">提交</button></form></div><!--ZUIJavascript依赖jQuery--><scriptsrc="http://zui.sexy/assets/jquery.js"></script><!--ZUI标准版压缩后的JavaScript文件--><scriptsrc="http://zui.sexy/dist/js/zui.min.js"></script><scripttype="text/javascript">$('form').submit(function(){letfile=$(":file")[0].files[0];letfileName=file.name;letfileSize=file.size;console.log('fileSize',fileSize);letblockSize=0.9*1024*1024;letnum=Math.ceil(fileSize/blockSize);letstart=0;letend=0;for(leti=1;i<=num;i++){end=blockSize*i;if(end>fileSize){end=fileSize;}letblock=file.slice(start,end);start=end;letfd=newFormData();fd.append('block',block);fd.append('name',fileName);fd.append('total',num);fd.append('index',i);$.ajax({url:"upload.php",type:"POST",data:fd,async:true,processData:false,contentType:false,success:(res)=>{console.log('res_'+i+":");console.log(res);}})}returnfalse;});</script></body></html>后端代码
在所有的文件上传成功之后，合并生成原来的大文件
<?php$name=$_POST['name'];$index=$_POST['index'];$total=$_POST['total'];echo"name:".$name.PHP_EOL;echo"index:".$index.PHP_EOL;echo"total:".$total.PHP_EOL;move_uploaded_file($_FILES['block']['tmp_name'],'upload/'.$name."_".$index);$list=scandir('upload');$num=count($list)-2;echo"cur_num:".$num.PHP_EOL;if($num==$total){echo"uploaddone".PHP_EOL;echo$cmd="catupload/'{$name}_'*>upload/'{$name}'";shell_exec($cmd);}
