讨论数量:
<script>
/* 显示遮罩层 */
function showOverlay() {
$("#displayBox").css('display','block');
$("#displayBox").height(document.body.scrollHeight);
$("#displayBox").width(document.body.scrollWidth);
// fadeTo第一个参数为速度,第二个为透明度
// 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
$("#displayBox").fadeTo(200, 0.5);
// 解决窗口缩小时放大后不全屏遮罩的问题
// 简单来说,就是窗口重置的问题
$('#upload').attr('disabled','disabled');
}
/* 隐藏覆盖层 */
function hideOverlay() {
$("#displayBox").fadeOut(200);
$("#displayBox").css('display','none');
$('#upload').removeAttr('disabled');
}
</script>
$(function(){
// page.init();
$("#upload").on('click',function () {
$('#upload').attr('disabled','disabled');
alert('点击确认开始上传视频,大文件上传会比较慢,请不要继续点击,耐心等待。');
return false;
var file = $("#file")[0].files[0], //文件对象
name = file.name, //文件名
size = file.size, //总大小
succeed = 0;
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
for(var i = 0;i < shardCount;++i){
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize);
//构造一个表单,FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start,end)); //slice方法用于切出文件的一部分
form.append("name", name);
form.append("total", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
//Ajax提交
$.ajax({
url: "/admin/video/datastudentvideo/upload",
type: "POST",
data: form,
async: false, //
processData: false, //很重要,告诉jquery不要对form进行处理
contentType: false, //很重要,指定为false才能形成正确的Content-Type
beforeSend:function(XMLHttpRequest){
console.log('远程调用开始');
},
success: function(reponse){
++succeed;
$("#c-url").val(reponse);
console.log('asdasdas1111');
console.log(reponse);
console.log($("#c-url").val());
console.log($("#c-url"));
$("#output").text(succeed + " / " + shardCount);
}
});
}
hideOverlay();
})
});
推荐文章: