在工做中常常會遇到一些大文件上傳的需求,多是圖片,壓縮包,視頻,安裝包等等,那若是涉及到大文件上傳,咱們應該怎麼辦呢?接下來就經過分析+代碼展現給你們提供一些方向.php
1、思路分析
將文件切割成若干個不一樣的小文件上傳到服務端,由服務端進行文件的合併以及移動.css
這裏的話須要瞭解slice(),文件切割主要須要用到的方法.
注意記得去php配置調整文件上傳大小
html
2、案例展現
- 前端頁面部分
<!doctype html> <html> <head> <meta charset="utf-8"> <title>demo<在這裏插入代碼片/title> </head> <link rel="stylesheet" href="js/layui/css/layui.css"> <style type="text/css"> #file { position: absolute; left: 0; top: 0; padding: 0; margin: 0; height: 132px; opacity: 0; width: 362px } </style> <body> <div class="layui-input-inline layui-upload-drag" style="width: 300px"> <input type="file" id="file"> <i class="layui-icon"></i> <p>點擊圖標上傳，或將文件拖拽到此處</p> <div class="" id="uploadDemoView"> <span>未選擇文件</span> </div> </div> <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" style="margin-top: 20px;width: 362px"> <div class="layui-progress-bar layui-bg-red" lay-percent="0" id="demo"></div> </div> <div style="margin-top: 25px;width: 300px;text-align: center;"> <button type="button" class="layui-btn layui-btn-normal" id="upload">上傳</button> <!-- 偷懶 --> <a href="" type="button" class="layui-btn layui-btn-primary">清空</a> </div> <script src="js/layui/layui.all.js"></script> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script> var element = ''; layui.use('element', function(){ element = layui.element; }); //上傳功能 $("#upload").click(function(){ //文件對象 var file = $("#file")[0].files[0]; var qp = { }; if (file == undefined) { layer.msg('請先選擇文件'); return; } var file_name = file.name; //文件名 var file_size = file.size; //文件總大小 var succeed = 0; //請求成功次數 var shardSize = 10485760; //10M分片大小單位字節 記得去php配置調整文件大小 var shardCount = Math.ceil(file_size/shardSize);//總片數 var rate = 1/shardCount*100; //進度條 for (var i = 0; i < shardCount; i++) { var start = i * shardSize; // 計算每一片數據的起始與結束位置 var end = Math.min(file_size, start + shardSize); var form = new FormData(); var loading = ''; form.append("data", file.slice(start, end)); //切片數據 form.append("file_name", file_name); form.append("total", shardCount); // 總片數 form.append("index", i + 1); // 當前是第幾片 // Ajax提交 $.ajax({ url: "UploadBigFile.php?act=upload", type: "POST", data: form, async: true, processData: false, dataType : "json", contentType: false, beforeSend: function(){ loading = layer.msg('文件上傳中請稍等', { icon: 16 ,shade: 0.11 ,time:888888 }); }, success: function(data){ if (data.errno == 10000) { succeed ++; element.progress('demo', (succeed*rate).toFixed(2)+'%'); if (succeed == shardCount) { qp.total = shardCount; qp.file_name = file_name; layer.close(loading); $.ajax({ url: "UploadBigFile.php?act=join", type: "POST", data: qp, beforeSend: function(){ loading = layer.msg('等待文件合併', { icon: 16 ,shade: 0.11 ,time:888888 }); }, success: function(data){ if (data.code == 10000) { layer.open({ content: '上傳成功', time: 1000}); setTimeout(function(){ }, 2000); } else { layer.open({ content: '上傳失敗', time: 2}); setTimeout(function(){ location.reload(); }, 2000); } } }); } } else { layer.open({ content: '上傳失敗', time: 2}); setTimeout(function(){ location.reload(); }, 2000); } } }); } }); //獲取文件名 $('#file').change(function(){ var file = document.getElementById("file").files; $('#uploadDemoView').find('span').text('已選擇: '+file[0]['name']); }); </script> </body> </html>
- 後端頁面部分
<?php $name = strstr($_POST['file_name'],'.',1);//文件名稱 $act = $_GET['act']; $path = "./upload/"; $ext_suffix = substr($_POST['file_name'],strripos($_POST['file_name'],".")+1);//文件後綴 if ($act == 'upload') { $index = $_POST['index'];//當前片數 $filename = $path."$index".$name.'.'.$ext_suffix; //斷點上傳已經存在的就跳過 $result = move_uploaded_file($_FILES['data']['tmp_name'], $filename); if ($result) { echo json_encode(array('errno'=>10000, 'message'=>'ok')); } else { echo json_encode(array('errno'=>10001, 'message'=>'上傳失敗')); } } elseif ($_GET['act'] == 'join') { $total = intval($_POST['total']); @unlink(iconv('UTF-8', 'GBK', $path.$name.'.'.$ext_suffix)); for($i = 1; $i<=$total; $i++){ file_put_contents($path.iconv('UTF-8', 'GBK',$name.'.'.$ext_suffix), file_get_contents(iconv('UTF-8', 'GBK', $path."$i".$name.'.'.$ext_suffix)), FILE_APPEND); @unlink(iconv('UTF-8', 'GBK', $path."$i".$name.'.'.$ext_suffix)); } echo json_encode(array('errno'=>10000, 'message'=>'上傳成功')); }
主要代碼部分的話已經貼到該文章中,一些引入文件夾部分須要本身建立,我已經在demo壓縮包上傳到資源中,等審覈經過後會附在文章上面.前端
demo下載(關注後就能夠免費下載)jquery