视频ajax拖拽上传详解.doc
文本预览下载声明
视频Ajax拖拽上传 断点续传
后台效果:
前台效果图:
后台实现过程:
在languages/zh_cn/admin/goods.php中插入
$_LANG[tab_video] = 视频上传;
(图1)
2显示标签
在admin/templates/goods_info.htm中
将span class=tab-back id=video-table{$lang.tab_video}/span
写入到div id=tabbar-div里
如下图
然后,在form标签中将下面代码粘贴在下图之上
table width=90% id=video-table align=center style=display:none;
tr
td
div id=drop_area style=border:3px dashed silver;width:200px; height:200px
将图片拖拽到此
/div
input type=hidden id=video_val name=goods_video
progress value=0 max=10 id=prouploadfile/progress
span id=persent0%/span
br /
!--button onclick=xhr2()ajax上传/button--
input type=button onclick=stopup() id=stop value=上传
script
//拖拽上传开始
//-1.禁止浏览器打开文件行为
document.addEventListener(drop,function(e){ //拖离
e.preventDefault();
})
document.addEventListener(dragleave,function(e){ //拖后放
e.preventDefault();
})
document.addEventListener(dragenter,function(e){ //拖进
e.preventDefault();
})
document.addEventListener(dragover,function(e){ //拖来拖去
e.preventDefault();
})
//上传进度
var pro = document.getElementById(prouploadfile);
var persent = document.getElementById(persent);
function clearpro(){
pro.value=0;
persent.innerHTML=0%;
}
//2.拖拽
var stopbutton = document.getElementById(stop);
var resultfile=;
var box = document.getElementById(drop_area); //拖拽区域
box.addEventListener(drop,function(e){
var fileList = e.dataTransfer.files; //获取文件对象
显示全部