ajax php 视频，大型文件上传

最新推荐文章于 2024-05-11 10:45:50 发布

cwhatiscs

最新推荐文章于 2024-05-11 10:45:50 发布

阅读量345

点赞数

html页面

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<style>
.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; }
</style>
</head>

<body>
<div class="addBorder" id="imgDiv" style="min-height: 300px;">

</div>
<form id="imgForm">
<input type="file" id="file" class="addBorder upload_file" οnchange="loadImg()">
<button type="button" class="upload_btn">获取图片</button>
</form>

<script>
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<size){

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('<video width="500" height="280" src="/'+data.data+'" width="100%" controls autoplay></video>');
}
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;
}
</script>
</body>
</html>

PHP 处理

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

cwhatiscs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax php 视频，大型文件上传

html页面<!doctype html><html lang="zh"><head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="https://code.jquery.com/jquery...
复制链接

扫一扫