首先先要建好几个文件
html里面代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>文件上传</title> 6 ????<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 7 </head> 8 <body> 9 ????<form id="form1">10 ????????<p><label for="username">姓名</label><input type="text" name="username" id="username"></p>11 ????????<p><label for="file">文件</label><input type="file" name="file" id="file" multiple="multiple"></p>12 ????????<p><input type="button" value="提交" id="btn1"></p>13 ????</form>14 <div id="content"></div>15 <script type="text/javascript">16 ????$(‘#btn1‘).on(‘click‘,function(){17 ????????//定义一个空的formdata对象，存储需要向后台发送的数据18 ????????//注意不要写成 var fd=new FormData($(‘#form1‘)[0])的形式19 ????????//这样会获取软件所有的数据，包含原始文件，向后台传递时会出现超出20 ????????//php.ini配置文件所设置的8M大小的限制错误21 22 ????????//1获取需要的上传的原始文件23 ????????//可以同时上传多个文件，多个文件对象储存在files集合中24 ????????// 可以通过索引(fileSize[index])获取集合中的某个文件25 ????????var file=document.getElementById(‘file‘).files[0];26 ????????// 2 ??设置参数27 ????????var start=0; ??????????????//初始分割位置（从0开始）28 ????????var length=2*1024*1024; ?????//1MB29 ????????var end=start+length; ?????//终止分割位置30 ????????var blob; ????????????????//blob变量储存分割后的文件数据31 ????????var blob_num=1; ???????????//每个文件切片（切割后的每个小文件）的编号，后台程序用此编号为各切片命名32 ????????// ?3 ??调用cutFile()函数分割文件33 ????????blob=cutFile(file);34 35 ????????// 4 ????调用sendFile()函数向后台程序传递文件36 ????????sendFile(blob,file);37 38 ????????// ??5 ??切割文件函数39 ????????function cutFile(file){40 ????????????//使用alice分割文件41 ????????????var file_blob=file.slice(start,end);42 ????????????//重新设置下次截取文件时使用的起始位置，结束位置43 ????????????start=end; ??//注意语句前不要加var，否则会覆盖上面声明的全局变量start，下面的end同理44 ????????????end=start+length;45 ????????????//返回截取的文件数据46 ????????????return file_blob;47 ????????}48 49 ????????// ?6 向后台传送文件函数50 ????????function sendFile(blob,file){51 ????????????var fd=new FormData();52 ????????????$username=$(‘#username‘).val();53 ????????????fd.append(‘username‘,$username);54 ????????????fd.append(‘file‘,blob);55 ????????????fd.append(‘filename‘,file.name);56 ????????????fd.append(‘blob_num‘,blob_num);57 ????????????fd.append(‘total_blob_num‘,Math.ceil(file.size/length));58 ????????????//发送ajax59 ????????????$.ajax({60 ????????????????url:‘upload.php‘,61 ????????????????type:‘post‘,62 ????????????????dataType:‘json‘,63 ????????????????data:fd,64 ????????????????//不添加下面两行代码将出错65 ????????????????processData:false,66 ????????????????contentType:false,67 ????????????????success:function(response){68 ????????????????????// console.log(response);69 ????????????????????// return; ???????????????????//将返回结果放入div中70 ????????????????????// var result=‘‘;71 ????????????????????// result+="姓名："+response[‘username‘]+"<br/><img src=‘"+response[‘filename‘]+"‘>";72 ????????????????????// $(‘#content‘).html(result); ?//将html字符串添加到div中73 ????????????????}74 ????????????})75 76 ????????????if (start<file.size) {77 ????????????????var t=setTimeout(function(){78 ????????????????????blob_num++;79 ????????????????????blob=cutFile(file);80 ????????????????????sendFile(blob,file);81 ????????????????},1000);82 ????????????}else{83 ????????????????clearTimeout(t)84 ????????????}85 86 ????????}87 ????})88 </script>89 </body>90 </html>php里面代码
1 <?php ?2 $username=$_POST[‘username‘]; 3 //1 ?接收前端传过来的参数 4 $ori_file_name=$_POST[‘filename‘]; ?//原始文件的文件名 5 $file=$_FILES[‘file‘]; 6 $tmp_name=$file[‘tmp_name‘]; ??//临时文件名 7 $blob_num=$_POST[‘blob_num‘]; 8 $total_blob_num=$_POST[‘total_blob_num‘]; //切片总数量 9 10 //2 将上传的文件移动的指定的位置11 $uploadDir=‘upload‘; ????//目标文件夹12 $slice_file_name=$uploadDir.‘/‘.$ori_file_name.‘_‘.$blob_num; ????//切片文件的文件名13 move_uploaded_file($tmp_name, $slice_file_name); ???????????//将临时文件移动到目标位置并重命名14 15 //3 ?合并所有切片16 if ($blob_num==$total_blob_num) {17 ????$blob=‘‘;18 ????for ($i=1; $i<=$total_blob_num; $i++) { 19 ????????//获取并连接各文件数据20 ????????$blob.=file_get_contents($uploadDir.‘/‘.$ori_file_name.‘_‘.$i);21 ????}22 ????file_put_contents($uploadDir.‘/‘.$ori_file_name,$blob);23 ????//删除所有切片24 ????for ($i=1; $i <=$total_blob_num ; $i++) { 25 ????????unlink($uploadDir.‘/‘.$ori_file_name.‘_‘.$i);26 ????}27 }28 ????//5 ??构造返回前台的数组29 ????$data=array(30 ??????????‘username‘=>$username,31 ????????‘filename‘=>$uploadDir.‘/‘.$ori_file_name,32 ????????‘tmp_name‘=>$tmp_name,33 ????????‘blob_num‘=>$blob_num,34 ????????‘slice_file_name‘=>$slice_file_name,35 ????????);36 37 ????// ?6 向前台返回json格式数据38 ????echo json_encode($data);39 ????40 41 42 43 44 45 46 ??>然后到这就结束啦~~
大文件上传
原文地址：https://www.cnblogs.com/mfBlog/p/10620957.html