html页面
HTML5 Ajax Uploader.upload_btn{ z-index: 1; border: none; background-color: #0e947a; width: 80px; height: 30px; font-size: 16px; color: #fff5d4;}
.upload_cc{z-index:1; width: 80px; height: 30px; font-size: 16px;}
.upload_btnss{width: 100%;float: left; height: 50px; line-height: 50px; text-align: center;}
.upload_file{position: absolute; z-index: 99; width: 60px; opacity: 0; }
获取图片
function loadImg(){
var c= true;
$.each($("#imgDiv video"),function (index) {
if (index>3){
c = false;
}
})
if (c===false){
alert('最多只能上传5个视频');
return false;
}
var blob = document.getElementById('file').files[0];
var size = blob.size;
var filename = blob.name;
var price_sex =1024*1024*2;
var index = 0;
var price_num = Math.ceil(size/price_sex);
var start=0;
var end;
var cc = 1;
while (start
end = start+price_sex;
var chunk = blobSlice(blob,start,end);
var slice_index = blob.name+index;
var formData = new FormData();
formData.append('file',chunk,filename);
if (index===(price_num-1)){
formData.append('end',1);
}
$.ajax({
type:'POST',
url:"{:url('')}",
cache:false,
data:formData,
processData : false,
contentType : false,
dataType:'json',
success:function (data) {
if (data.data!==''){
$("#imgDiv").append('');
}
cc++;
}
});
start = end;
index++;
}
}
function blobSlice(blob,startByte,endByte){
if(blob.slice){
return blob.slice(startByte,endByte);
}
if(blob.mozSlice){
return blob.mozSlice(startByte,endByte);
}
if(blob.webkitSlice){
return blob.webkitSlice(startByte,endByte);
}
return null;
}
PHP 处理
if ($this->request->isAjax()){
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$file = $_FILES['file'];
$ext_arr = explode('.',$file['name']);
$filename = md5($file['name']).".".$ext_arr[1];
$file_path = "upload/shipin/";
file_put_contents($file_path.$filename, file_get_contents($file['tmp_name']), FILE_APPEND);
$end = request()->post('end');
if ($end==1){
$data['store_id'] = $this->_store_id;
$data['urls'] = "/".$file_path.$filename;
$data['addtime'] = time();
Db::name("store_shipin")->where('store_id',$data['store_id'])->insert($data);
$this->success('上传成功','',$file_path.$filename);
}
}
效果:
文件上传存放目录:D:\wamp64\www\up6\db\upload\2019\04\19\920144c756af424ca59136be71cf9209
大文件上传至后台服务端,统一放置。
DEMO下载地址:https://dwz.cn/fgXtRtnu