大文件上传
首先先要建好几个文件
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; //1MB 29 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 //发送ajax 59 $.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 ?>
然后到这就结束啦~~
