码迷,mamicode.com
首页 > Web开发 > 详细

大文件上传

时间:2019-03-29 14:38:44      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:注意   timeout   math   字符串   超出   tle   总数   包含   前端   

首先先要建好几个文件

技术图片

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  ?>

然后到这就结束啦~~

 

大文件上传

标签:注意   timeout   math   字符串   超出   tle   总数   包含   前端   

原文地址:https://www.cnblogs.com/mfBlog/p/10620957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!