拖拽上传图片--文件

港控/mmm° 2022-07-26 11:20 251阅读 0赞

应用upload.js

拖拽上传开始

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="<img width='200px' height='200px' src='"+fileurl+"'>";
                document.getElementById('drop_area').innerHTML=str;             
             }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                  
                var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
                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)<i){
                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上传
    
          var stop=1;
          function xhr2(){
             if(stop==1){
                return false;
             }
             if(resultfile==""){
                alert("请选择文件")
                return false;
             }
             i=getCookie(resultfile.name);
             console.log(i)
             i = (i!=null && i!="")?parseInt(i):0
             
             if(Math.floor(filecount)<parseInt(i)){
                alert("已经完成");
                return false;
             }else{
                //alert(i)
             }
             var xhr = new XMLHttpRequest();//第一步
             //新建一个FormData对象
             var formData = new FormData(); //++++++++++
             //追加文件数据
             
             //改变进度条
             pro.value=i+1;
             p=parseInt(i+1)*100/Math.ceil(filecount)
             persent.innerHTML=parseInt(p)+"%";
             //进度条
             
             
             if((filesize-i*setsize)>setsize){
                blobfile= resultfile.slice(i*setsize,(i+1)*setsize);
             }else{
                blobfile= resultfile.slice(i*setsize,filesize);
                formData.append('lastone', Math.floor(filecount));
             }
                formData.append('file', blobfile);
                //return false;
                formData.append('blobname', i); //++++++++++
       　　    formData.append('filename', resultfile.name); //++++++++++
                //post方式
                xhr.open('POST', 'xhr2.php'); //第二步骤
                //发送请求
                xhr.send(formData);  //第三步骤
                stopbutton.innerHTML = "暂停"
                //ajax返回
                xhr.onreadystatechange = function(){ //第四步
             　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
             　　　　　　console.log( xhr.responseText );
                      if(i<filecount){
                         xhr2();
                      }else{
                         i=0;
                      }     
             　　　　}
             　　};
                //设置超时时间
                xhr.timeout = 20000;
                xhr.ontimeout = function(event){
             　　　　alert('请求超时，网络拥堵！低于25K/s');
             　　}          
                
                i=i+1;
                setCookie(resultfile.name,i,365)
                
          }
          
          //设置cookie
          function setCookie(c_name,value,expiredays)
          {
             var exdate=new Date()
             exdate.setDate(exdate.getDate()+expiredays)
             document.cookie=c_name+ "=" +escape(value)+
             ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")
          }
          //获取cookie
          function getCookie(c_name)
          {
          if (document.cookie.length>0)
            {
            c_start=document.cookie.indexOf(c_name + "=")
            if (c_start!=-1)
             { 
             c_start=c_start + c_name.length+1 
             c_end=document.cookie.indexOf(";",c_start)
             if (c_end==-1) c_end=document.cookie.length
             return unescape(document.cookie.substring(c_start,c_end))
             } 
            }
          return ""
          }
          
          
          function stopup(){
             if(stop==1){
                stop = 0
                
                xhr2();
             }else{
                stop = 1
                stopbutton.innerHTML = "继续"
                
             }
             
          }

然后HTML写入代码

<div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">
       将图片拖拽到此
    </div>
    
    <progress value="0" max="10" id="prouploadfile"></progress>
    
    <span id="persent">0%</span>
    <br />
        
    <button οnclick="stopup()" id="stop">上传</button>   
    <script src="upload.js">
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5拖拽文件上传

上传文件 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类

淩亂°似流年/ 2023年01月01日 06:56/ 0 赞/ 160 阅读

相关 html5学习(文件拖拽上传)

> html5文件拖拽上传,有图有代码！文件拖拽的核心代码不多，如下可做参考： divNode.ondrop = function(e) { e.pre

淩亂°似流年/ 2022年12月31日 02:25/ 0 赞/ 147 阅读

相关 java 拖拽上传_Java swing怎么实现上传文件并支持拖拽上传

展开全部你这个复杂了，我稍微说说吧。进度条稍微简单点，你就去看看Oracle的tutorial就行了，记得运用科学(或3231313335323631343130323

深碍√TFBOYSˉ_/ 2022年11月02日 11:46/ 0 赞/ 408 阅读

相关 ASP.NET MVC文件上传、文件拖拽上传demo

原文：[http://www.codeproject.com/Articles/833159/Uploading-Image-by-File-Browsing-Dragging

迈不过友情╰/ 2022年08月13日 13:58/ 0 赞/ 269 阅读

相关拖拽上传图片--文件

应用upload.js 拖拽上传开始 document.addEventListener("drop",function(e){ //拖离

港控/mmm°/ 2022年07月26日 11:20/ 0 赞/ 252 阅读

相关 ajax 文件拖拽上传

客户端服务器端客户端 <!DOCTYPE html> <html lang="en"> <head>

╰半夏微凉°/ 2022年07月19日 06:00/ 0 赞/ 248 阅读

相关拖拽上传图片(可多张)

upload.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

左手的ㄟ右手/ 2022年06月03日 10:36/ 0 赞/ 270 阅读

相关拖拽上传图片(只能上传单张)

upload.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

你的名字/ 2022年06月03日 10:27/ 0 赞/ 266 阅读

相关拖拽上传图片，及删除小实例

主要还是对draggable的练习，因为之前遇到了点小问题，所以今天才整理，对draggable不太了解的请点击深入理解js中的draggable，该有的解释已经在注释中了，所

小灰灰/ 2022年05月28日 04:51/ 0 赞/ 225 阅读

相关 electron 拖拽上传文件

1、因为electron集成了node,故可以使用node的方式来对文件操作代码示例: //引入node模块 const fs=require('fs')

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:49/ 0 赞/ 1029 阅读