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

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

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. //创建一个url连接,供src属性引用
17. var fileurl = window.URL.createObjectURL(fileList[0]);
18. if(fileList[0].type.indexOf('image') === 0){  //如果是图片
19. var str="<img width='200px' height='200px' src='"+fileurl+"'>";
20. document.getElementById('drop_area').innerHTML=str;
21. }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频
22. var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
23. document.getElementById('drop_area').innerHTML=str;
24. }else{ //其他格式，输出文件名
25. //alert("不预览");
26. var str="文件名字:"+fileList[0].name;
27. document.getElementById('drop_area').innerHTML=str;
28. }
29. resultfile = fileList[0];
30. },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. ?>