ajax文件拖拽上传 预览

Posted 2022-12-12 画个圈圈爱上你

本地上传，提前预览（图片，视频）

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

[html]

view plain copy

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

2.禁止浏览器打开文件行为

[html]

view plain copy

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.拖拽,预览文件

[html]

view plain copy

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上传

[html]

view plain copy

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保存文件

[html]

view plain copy

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. ?>