大文件分片上传,简单来说就是把大文件切分为小文件,然后再一个一个的上传,到最后由这些小文件再合并成原来的文件.
html代码如下
<link rel="stylesheet" type="text/css" href="../Public/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="../Public/css/style.css" />
<script type="text/javascript" src="../Public/js/jquery.js"></script>
<div id="wrapper">
<div id="container">
<!--头部,相册选择和格式选择-->
<div id="uploader">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将文件拖到这里</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script type="text/javascript" src="../Public/js/jquery.js"></script>-->
<script type="text/javascript">
var uploadServerFileUrl = '{:U("Fileupload/fileupload")}';
</script>
<script type="text/javascript" src="../Public/dist/webuploader.js"></script>
<script type="text/javascript" src="../Public/js/uploadfile.js"></script>
<!-- 上传视频 -->
uploadfile.js 主要配置 如下
// 获取上传成功之后
uploader.on('uploadSuccess', function (file, response) {
console.log(file)
console.log(response)
});
response 可以显示上传成功后返回的ajax详细信息
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择文件'
},
formData: {
uid: 123
},
dnd: '#uploader .queueList',
paste: '#uploader',
swf: '../../dist/Uploader.swf',
chunked: false,
chunkSize: 512 * 1024,
server:上传服务器地址,
accept: {
title: '视频上传',
extensions: 'mp4',
mimeTypes: 'video/mp4'
},
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
disableGlobalDnd: true,
fileNumLimit: 300,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 50 * 1024 * 1024 * 10 // 50 M
});
其中nginx需要设置
找到自己主机的nginx.conf配置文件,打开在http{}中加入 client_max_body_size 10m;
然后重启nginx/etc/init.d/nginx restart
php.ini需要设置
pload_max_filesize = 100M
post_max_size = 100M