JavaScript实现拖拽预览,AJAX小文件上传

原创 2016年08月30日 09:13:10

本地上传,提前预览(图片,视频)

1.html中div标签预览显示,button标签触发上传事件。

  1. <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>  
  2. <button onclick="xhr2()">ajax上传</button>  

2.禁止浏览器打开文件行为
  1. document.addEventListener("drop",function(e){  //拖离   
  2.     e.preventDefault();      
  3. })  
  4. document.addEventListener("dragleave",function(e){  //拖后放   
  5.     e.preventDefault();      
  6. })  
  7. document.addEventListener("dragenter",function(e){  //拖进  
  8.     e.preventDefault();      
  9. })  
  10. document.addEventListener("dragover",function(e){  //拖来拖去    
  11.     e.preventDefault();      
  12. })  


3.拖拽,预览文件
  1. var box = document.getElementById('drop_area'); //拖拽区域     
  2. box.addEventListener("drop",function(e){           
  3.     var fileList = e.dataTransfer.files; //获取文件对象    
  4.     //检测是否是拖拽文件到页面的操作            
  5.     if(fileList.length == 0){                
  6.         return false;            
  7.     }             
  8.     //拖拉图片到浏览器,可以实现预览功能    
  9.     //规定视频格式  
  10.     Array.prototype.S=String.fromCharCode(2);  
  11.     Array.prototype.in_array=function(e){  
  12.         var r=new RegExp(this.S+e+this.S);  
  13.         return (r.test(this.S+this.join(this.S)+this.S));  
  14.     };  
  15.     var video_type=["video/mp4","video/ogg"];  
  16.       
  17.     //创建一个url连接,供src属性引用  
  18.     var fileurl = window.URL.createObjectURL(fileList[0]);                
  19.     if(fileList[0].type.indexOf('image') === 0){  //如果是图片  
  20.         var str="<img width='200px' height='200px' src='"+fileurl+"'>";  
  21.         document.getElementById('drop_area').innerHTML=str;                   
  22.     }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                    
  23.         var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";  
  24.         document.getElementById('drop_area').innerHTML=str;        
  25.     }else{ //其他格式,输出文件名  
  26.         //alert("不预览");  
  27.         var str="文件名字:"+fileList[0].name;  
  28.         document.getElementById('drop_area').innerHTML=str;      
  29.     }         
  30.     resultfile = fileList[0];             
  31. },false);  

4.ajax上传
  1. function xhr2(){  
  2.     var xhr = new XMLHttpRequest();//第一步  
  3.     //新建一个FormData对象  
  4.     var formData = new FormData(); //++++++++++  
  5.     //追加文件数据  
  6.     formData.append('file', resultfile);  
  7.     //post方式  
  8.     xhr.open('POST', 'xhr2.php'); //第二步骤  
  9.     //发送请求  
  10.     xhr.send(formData);  //第三步骤  
  11.     //ajax返回  
  12.     xhr.onreadystatechange = function(){ //第四步  
  13.     if ( xhr.readyState == 4 && xhr.status == 200 ) {  
  14.       console.log( xhr.responseText );        
  15.     }  
  16.   };  
  17.     //设置超时时间  
  18.     xhr.timeout = 10000;  
  19.     xhr.ontimeout = function(event){  
  20.     alert('请求超时!');  
  21.   }           
  22. }  

5.php保存文件
  1. <?php  
  2.     print_r($_FILES["file"]);  
  3.     $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数  
  4.     move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));  
  5. ?> 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 [html] view plain copy div  id="dr...

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 将图片拖拽到此 ajax上传 2.禁止浏览器打开文件行为 document.addEventL...
  • Zph1234
  • Zph1234
  • 2016年01月10日 22:14
  • 1814

JavaScript实现拖拽预览,AJAX小文件上传

JavaScript实现拖拽预览,AJAX小文件上传
  • wplblog
  • wplblog
  • 2016年07月11日 17:59
  • 176

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 [html] view plain copy ...
  • lmy_1
  • lmy_1
  • 2016年09月07日 19:08
  • 254

JavaScript实现拖拽预览,AJAX小文件上传

版权声明:本文为博主原创文章,未经博主允许不得转载。 本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 [html] view plain ...

JavaScript实现拖拽预览,AJAX小文件上传

控制器层: /** * *测试文件拖拽上传 *ajajx上传 */ public function actionTuo() { return $this->render('tu...

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 将图片拖拽到此 ajax上传 2.禁止浏览器打开文件行为 docume...

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事...

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 [html] view plain copy ...

JavaScript实现拖拽预览,AJAX小文件上传

JavaScript实现拖拽预览,AJAX小文件上传
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现拖拽预览,AJAX小文件上传
举报原因:
原因补充:

(最多只允许输入30个字)