在作業中經常會遇到一些大檔案上傳的需求,可能是圖片,壓縮包,視頻,安裝包等等,那如果涉及到大檔案上傳,我們應該怎么辦呢?接下來就通過分析+代碼展示給大家提供一些方向.
一、思路分析
將檔案切割成若干個不同的小檔案上傳到服務端,由服務端進行檔案的合并以及移動.
這里的話需要了解slice(),檔案切割主要需要用到的方法.
注意記得去php配置調整檔案上傳大小
二、案例展示
- 前端頁面部分
<!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下載(關注后就可以免費下載)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/205476.html
標籤：其他