1. 程式人生 > 其它 >大檔案切片上傳

大檔案切片上傳

1.前端js

<script>
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
var id =$("input[name = 'id']").val();
//騰訊cos
var uploadListIns = upload.render({
elem: '#testList'
,elemList: $('#demoList') //元素物件
,url: "{:U('upload')}" //後臺介面地址
,data:{'id':id}
,accept: 'file'
,multiple: true
,number: 3
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列
//讀取本地檔案
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重傳</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">刪除</button>'
,'</td>'
,'</tr>'].join(''));

//單個重傳
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});

//刪除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //刪除對應的檔案
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免刪除後出現同名檔案不可選
});

that.elemList.append(tr);
element.render('progress'); //渲染新加的進度條元件
});
}
,done: function(res, index, upload){ //成功的回撥
var that = this;
if(res.status == 1){ //上傳成功
layer.msg("上傳成功");
}
this.error(index, upload);
}
,allDone: function(obj){ //多檔案上傳完畢後的狀態回撥
console.log(obj)
}

,progress: function(n, elem, e, index){ //注意:index 引數為 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); //執行進度條。n 即為返回的進度百分比
}
});

});
</script>

2後臺介面upload

定義前端切片的絕對路徑:define("FILEPATH", "/域根目錄/data/files/");
定義介面合併的絕對路徑:define("FRAGPATH","/域根目錄/data/frags/" );

public function upload()
{
$file = $_FILES['file'];
$game_name = $_POST['name'];
$filename = explode("." , $_POST['filename']);
$ext = $filename[1];
$filename = $filename[0];
$orgFileName = $_POST['filename'];
//新建frag 資料夾, 以filename為命名方式
if(!file_exists(FRAGPATH.$filename)){
mkdir(FRAGPATH.$filename);
}

//將接收到的frag檔案移入file資料夾中
//$frag_path = SITE_ROOT.'/dir/'.$filename.'/'.iconv('UTF-8','gbk',basename($_FILES['file']['tmp_name']));
$frag_path = FRAGPATH.$filename ."/". $_POST['fragname'];
try{
if(move_uploaded_file($_FILES['file']['tmp_name'] , $frag_path)){
echo("success");
}
}catch (Exception $e){
throw new Exception();
}

//合併file資料夾中的frag為最終檔案
if( $_POST['fragindex'] == $_POST["total"] -1 ){
$blob = "";
$fragDir = FRAGPATH.$filename;
$handler = @opendir($fragDir);
//獲取filename
while ( ( $fragFileName = readdir($handler) ) !== false ){
$fp = fopen( FILEPATH . '/' . $orgFileName,"ab" );
// 務必使用!==,防止目錄下出現類似檔名“0”等情況
if ($fragFileName !== "." && $fragFileName !== "..")
{
//方式二:
$value = $fragDir . "/" . $fragFileName;
$handle = fopen($value,"rb");
fwrite($fp,fread($handle,filesize($value)));
fclose($handle);

//刪除切片檔案
@unlink($fragDir . "/" . $fragFileName);
}
}
//刪除切片資料夾
@rmdir($fragDir);
}
}