码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-06-23 19:39:34      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:image   list   file   dex   rac   cli   ext   document   order   

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

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

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

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="<img width='200px' height='200px' src='"+fileurl+"'>";
		document.getElementById('drop_area').innerHTML=str; 				
	}else if(video_type.in_array(fileList[0].type)){   //假设是规定格式内的视频                  
		var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
		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保存文件

<?

php print_r($_FILES["file"]); $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数 move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name)); ?>




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

标签:image   list   file   dex   rac   cli   ext   document   order   

原文地址:http://www.cnblogs.com/blfbuaa/p/7071288.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!