init: 项目初始代码
This commit is contained in:
175
public/upload
Normal file
175
public/upload
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="http://filecdn.wshare.club/webuploader/webuploader.css">
|
||||
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.4.3/css/layui.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--用来存放文件信息-->
|
||||
<div id="uploader-area">
|
||||
<div id="thelist" class="uploader-list"></div>
|
||||
<div class="btns">
|
||||
<div id="picker">选择文件</div>
|
||||
<button class="layui-btn layui-btn-normal" id="ctlBtn" style="margin-top: 10px;margin-bottom: 200px;">开始上传</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
|
||||
<script src="http://filecdn.wshare.club/webuploader/webuploader.js"></script>
|
||||
<script>
|
||||
var $btn =$("#ctlBtn"); //开始上传
|
||||
var BASE_URL = window.location.protocol + "://" + window.location.host + ":" + window.location.port;
|
||||
// var hash = '';
|
||||
function sj() {
|
||||
return (new Date()).valueOf();
|
||||
}
|
||||
|
||||
// WebUploader.Uploader.register({
|
||||
// 'before-send-file': 'beforeSendFile'
|
||||
// }, {
|
||||
// beforeSendFile: function(file) {
|
||||
// var me = this,
|
||||
// owner = this.owner,
|
||||
// server = me.options.server,
|
||||
// deferred = WebUploader.Deferred();
|
||||
//
|
||||
// owner.md5File(file).progress(function(percentage) {
|
||||
// console.log('Percentage:', percentage);
|
||||
// }).then(function(val) {
|
||||
// console.log('md5 result:', val);
|
||||
// hash = val;
|
||||
// //允许继续执行
|
||||
// deferred.resolve();
|
||||
// });
|
||||
//WU_FILE_0
|
||||
// return deferred.promise();
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
|
||||
var uploader = WebUploader.create({
|
||||
// swf文件路径
|
||||
swf: '',
|
||||
// 文件接收服务端。
|
||||
server: '/admin/soft_manual/upload_file',
|
||||
pick:'#picker',
|
||||
// 选择文件的按钮。可选。
|
||||
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
||||
multiple:false,
|
||||
fileNumLimit: 1,
|
||||
chunked: true, //是否要分片处理大文件上传
|
||||
chunkSize: 1 * 1024 * 1024, //分片上传，每片2M，默认是5M
|
||||
fileSingleSizeLimit: 10 * 1024 * 1024 * 1024,
|
||||
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
|
||||
resize: false,
|
||||
threads:10,
|
||||
formData: {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// 当有文件被添加进队列的时候
|
||||
uploader.on('fileQueued', function (file) {
|
||||
$("#ctlBtn").hide();
|
||||
var $list = $('#thelist');
|
||||
$list.append('<div id="' + file.id + '" class="item" style="font-weight:bold;padding:10px 30px;">' +
|
||||
'<h4 class="info" style="font-weight:bold;">' + file.name + '</h4>' +
|
||||
'<p class="state">文件已添加...</p>' +
|
||||
'</div>');
|
||||
var _html = '<span id="calculate_hash">正在计算文件hash值...进度<span id="hash_percent">0%</span></span>';
|
||||
$('#' + file.id).find('p.state').append(_html);
|
||||
// $list.append(_html);
|
||||
uploader.md5File(file).progress(function(percentage) {
|
||||
$("#picker").hide();
|
||||
$("#ctlBtn").hide();
|
||||
$("#hash_percent").text((percentage*100).toFixed(2)+'%');
|
||||
|
||||
}).then(function(val) {
|
||||
$("#calculate_hash").empty().append('<p>计算文件hash值...成功</p>');
|
||||
$("#ctlBtn").show();
|
||||
$("#ctlBtn").click();
|
||||
console.log('md5 result:', val);
|
||||
uploader.options.formData.hash = val;
|
||||
});
|
||||
|
||||
|
||||
uploader.options.formData.ext = file.ext;
|
||||
// uploader.options.formData.hash =
|
||||
});
|
||||
// 文件上传过程中创建进度条实时显示。
|
||||
uploader.on('uploadProgress', function (file, percentage) {
|
||||
|
||||
var $li = $('#' + file.id),
|
||||
$percent = $li.find('.progress .progress-bar');
|
||||
|
||||
// 避免重复创建
|
||||
if (!$percent.length) {
|
||||
$percent = $('<div class="progress progress-striped active" style="margin-top:10px;">' +
|
||||
'<div class="progress-bar" role="progressbar" style="width: 0%;">' +
|
||||
'</div>' +
|
||||
'</div>').appendTo($li).find('.progress-bar');
|
||||
}
|
||||
|
||||
$li.find('p.state').text('上传中,请稍等...');
|
||||
|
||||
$percent.css('width', percentage * 100 + '%');
|
||||
});
|
||||
|
||||
uploader.on('uploadBeforeSend', function(obj,data, headers) {
|
||||
$.extend(headers, {
|
||||
"x-token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJDTVMiLCJleHAiOiI2MDQ4MDEiLCJpYXQiOjE2MzIzMDM0NjksInVzZXJfaW5mbyI6eyJhZG1pbl9pZCI6MX19.d4134c153e75f6d236df7c21dd9d6ca8ca708e8dfc76536d4d99d0eed0f11e2f",
|
||||
});
|
||||
});
|
||||
|
||||
uploader.on('uploadSuccess', function (file, response) {
|
||||
$('#' + file.id).find('p.state').text('上传成功');
|
||||
// $('#' + file.id).find('p.state').append('</br>正在存储数据，请稍等...');
|
||||
//存储数据
|
||||
// $.ajax({
|
||||
// type: 'post',
|
||||
// url: "{:url('api/video/save')}",
|
||||
// data: { videoname: response.oldName, downurl: response.filePath, phase_id: phase_id, grade_id: grade_id, subject_id: subject_id },
|
||||
// success: function (res) {
|
||||
// if (res) {
|
||||
// if (res.code == 0) {
|
||||
// $('#' + file.id).find('p.state').append('</br>储存完成，即将刷新...');
|
||||
// setTimeout(function () {
|
||||
// parent.location.reload();
|
||||
// }, 2000);
|
||||
|
||||
// } else {
|
||||
// $('#' + file.id).find('p.state').append('</br>存储失败，请重新上传...原因:'+res.msg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
});
|
||||
|
||||
uploader.on('uploadError', function (file) {
|
||||
$('#' + file.id).find('p.state').text('上传出错');
|
||||
});
|
||||
|
||||
uploader.on('uploadComplete', function (file) {
|
||||
$('#' + file.id).find('.progress').fadeOut();
|
||||
});
|
||||
|
||||
$btn.on('click', function () {
|
||||
|
||||
if ($(this).hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
uploader.upload();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user