HTML5解决大文件断点续传

js代码

?
?
?
?
?
?
? ?将图片拖拽到此
?
?
?
?
? 0%
?

? ?
? 上传?
? <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; //获取文件对象?
? ?console.log(fileList)
? ?//检测是否是拖拽文件到页面的操作? ? ? ? ?
? ?if(fileList.length == 0){? ? ? ? ? ? ?
? ? return false;? ? ? ? ?
? ?}? ? ? ? ?
? ?//拖拉图片到浏览器，可以实现预览功能?
? ?//规定视频格式
? ?//in_array
? ?Array.prototype.S=String.fromCharCode(2);
? ?Array.prototype.in_array=function(e){
? ? var r=new RegExp(this.S+e+this.S);
? ? return (r.test(this.S+this.join(this.S)+this.S));
? ?};
? ?var video_type=["video/mp4","video/ogg"];
? ?
? ?//创建一个url连接,供src属性引用
? ?var fileurl = window.URL.createObjectURL(fileList[0]);? ? ?
? ?if(fileList[0].type.indexOf('image') === 0){? //如果是图片
? ? var str="";
? ? document.getElementById('drop_area').innerHTML=str; ? ?
? ?}else if(video_type.in_array(fileList[0].type)){? //如果是规定格式内的视频? ? ? ? ? ? ? ? ?
? ? var str="";
? ? document.getElementById('drop_area').innerHTML=str;? ? ?
? ?}else{ //其他格式，输出文件名
? ? //alert("不预览");
? ? var str="文件名字:"+fileList[0].name;
? ? document.getElementById('drop_area').innerHTML=str;? ?
? ?}?
? ?resultfile = fileList[0];?
? ?console.log(resultfile);?
? ?
? ?//切片计算
? ?filesize= resultfile.size;
? ?setsize=500*1024;
? ?filecount = filesize/setsize;
? ?//console.log(filecount)
? ?//定义进度条
? ?pro.max=parseInt(Math.ceil(filecount));?
? ?
? ?
? ?
? ?i =getCookie(resultfile.name);
? ?i = (i!=null && i!="")?parseInt(i):0
? ?
? ?if(Math.floor(filecount)? ? alert("已经完成");
? ? pro.value=i+1;
? ? persent.innerHTML="100%";
? ?
? ?}else{
? ? alert(i);
? ? pro.value=i;
? ? p=parseInt(i)*100/Math.ceil(filecount)
? ? persent.innerHTML=parseInt(p)+"%";
? ?}
? ?
? },false);  
?
? //3.ajax上传