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

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

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

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 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="<img width='200px' height='200px' src=http://www.mamicode.com/'"+fileurl+"'>";>
4.ajax上传
function xhr2(){
	var xhr = new XMLHttpRequest();//第一步
	//新建一个FormData对象
	var formData = http://www.mamicode.com/new FormData(); //++++++++++>
5.php保存文件
<?php
	print_r($_FILES["file"]);
	$name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数
	move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));
?
>