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

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

     
      将图片拖拽到此
     
ajax上传

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

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();    })

3.拖拽,预览文件

var box = document.getElementById('drop_area'); //拖拽区域   box.addEventListener("drop",function(e){         	var fileList = e.dataTransfer.files; //获取文件对象  	//检測是否是拖拽文件到页面的操作          	if(fileList.length == 0){              		return false;          	}           	//拖拉图片到浏览器，能够实现预览功能  	//规定视频格式	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];			},false);

4.ajax上传

function xhr2(){	var xhr = new XMLHttpRequest();//第一步	//新建一个FormData对象	var formData = new FormData(); //++++++++++	//追加文件数据	formData.append('file', resultfile);	//post方式	xhr.open('POST', 'xhr2.php'); //第二步骤	//发送请求	xhr.send(formData);  //第三步骤	//ajax返回	xhr.onreadystatechange = function(){ //第四步　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {　　　　　　console.log( xhr.responseText );		　　　　}　　};	//设置超时时间	xhr.timeout = 10000;	xhr.ontimeout = function(event){　　　　alert('请求超时！');　　}			}

5.php保存文件

>