zhuhai/upload.jsp

## upload.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>拖动上传</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style type="text/css">
		#droparea{
			width:700px;
			min-height:300px;
			border:4px dashed #34495e;
			background-color:#bdc3c7;
			margin:50px auto;
		}
		#droparea h3{
			text-align:center;
			/* line-height:300px; */
			margin-top:120px;
		}
		#droparea img{
			max-width:200px;
			max-height:200px;
			border:2px solid #fff;
			margin:5px;
		}

	</style>
</head>
<body>
	<div id="droparea">
		<h3 id="h3">请将文件拖动到此区域内或<a href="javascript:;" id="selectFiles">选择文件</a></h3>
	</div>
	<div class="progress">
	  <div class="bar" id="bar" style="width: 0%;"></div>
	</div>
	<h3 id="msg"></h3>
	<input type="file" multiple accept="image/*" style="display:none" id="fileInput" onchange="upload(null,this.files)"/>
	<script type="text/javascript">
		(function(){

			var dd=document.getElementById("droparea");
			var msg=document.getElementById("msg");
			var bar=document.getElementById("bar");
			var fileInput=document.getElementById("fileInput");
			var selectFiles=document.getElementById("selectFiles");

			selectFiles.onclick=function(){
				fileInput.click();
			};

			//拖动到层上面
			dd.ondragover=function(event){
				event.stopPropagation();
				event.preventDefault();
				dd.style.border="4px solid #8e44ad";
			};

			//拖动到层上面，然后离开
			dd.ondragleave=function(event){
				event.stopPropagation();
				event.preventDefault();
				dd.style.border="4px dashed #34495e";
			};

			//拖动到层上然后释放
			dd.ondrop=function(event){
				event.stopPropagation();
				event.preventDefault();
				dd.style.border="4px dashed #34495e";

				//获取所有拖动到层上的文件
				var files=event.dataTransfer.files;
				for(var i=0;i<files.length;i++){
					var file=files[i];

					//获取文件的大小
					var text="FileSize:"+file.size+"bytes<br/>";
					//获取文件的类型
					text+="FileType:"+file.type+"<br/>";
					//获取文件最后修改的时间
					text+="lastModifiedDate:"+file.lastModifiedDate;
					msg.innerHTML=text;

					//if(!file.type.match(/imag.*/)){
					//	continue;
					//}
					var fileReader=new FileReader();
					fileReader.onload=function(){
						var h3=document.getElementById("h3");
						if(h3){
							dd.removeChild(h3);
						}
						var img=document.createElement("img");
						img.setAttribute("src",this.result);
						dd.appendChild(img);
					};
					fileReader.readAsDataURL(file);//会自动触发onload方法

					var xmlHttp=new XMLHttpRequest();
					xmlHttp.open("post","upload.do",true);

					//上传进度事件
					xmlHttp.upload.onprogress=function(e){
						if(e.lengthComputable){
							var _progress=Math.round(e.loaded*100/e.total);
							if(_progress<=100){
								bar.style.width=_progress+"%";
							}
						}

					};

					var formData=new FormData();
					formData.append("file",file);
					xmlHttp.send(formData);


				}
			};


		})();

	</script>
</body>
</html>
	<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>拖动上传</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style type="text/css">
	#droparea{
	width:700px;
	min-height:300px;
	border:4px dashed #34495e;
	background-color:#bdc3c7;
	margin:50px auto;
	}
	#droparea h3{
	text-align:center;
	/* line-height:300px; */
	margin-top:120px;
	}
	#droparea img{
	max-width:200px;
	max-height:200px;
	border:2px solid #fff;
	margin:5px;
	}

	</style>
	</head>
	<body>
	<div id="droparea">
	<h3 id="h3">请将文件拖动到此区域内或<a href="javascript:;" id="selectFiles">选择文件</a></h3>
	</div>
	<div class="progress">
	<div class="bar" id="bar" style="width: 0%;"></div>
	</div>
	<h3 id="msg"></h3>
	<input type="file" multiple accept="image/*" style="display:none" id="fileInput" onchange="upload(null,this.files)"/>
	<script type="text/javascript">
	(function(){

	var dd=document.getElementById("droparea");
	var msg=document.getElementById("msg");
	var bar=document.getElementById("bar");
	var fileInput=document.getElementById("fileInput");
	var selectFiles=document.getElementById("selectFiles");

	selectFiles.onclick=function(){
	fileInput.click();
	};

	//拖动到层上面
	dd.ondragover=function(event){
	event.stopPropagation();
	event.preventDefault();
	dd.style.border="4px solid #8e44ad";
	};

	//拖动到层上面，然后离开
	dd.ondragleave=function(event){
	event.stopPropagation();
	event.preventDefault();
	dd.style.border="4px dashed #34495e";
	};

	//拖动到层上然后释放
	dd.ondrop=function(event){
	event.stopPropagation();
	event.preventDefault();
	dd.style.border="4px dashed #34495e";

	//获取所有拖动到层上的文件
	var files=event.dataTransfer.files;
	for(var i=0;i<files.length;i++){
	var file=files[i];

	//获取文件的大小
	var text="FileSize:"+file.size+"bytes<br/>";
	//获取文件的类型
	text+="FileType:"+file.type+"<br/>";
	//获取文件最后修改的时间
	text+="lastModifiedDate:"+file.lastModifiedDate;
	msg.innerHTML=text;

	//if(!file.type.match(/imag.*/)){
	// continue;
	//}
	var fileReader=new FileReader();
	fileReader.onload=function(){
	var h3=document.getElementById("h3");
	if(h3){
	dd.removeChild(h3);
	}
	var img=document.createElement("img");
	img.setAttribute("src",this.result);
	dd.appendChild(img);
	};
	fileReader.readAsDataURL(file);//会自动触发onload方法

	var xmlHttp=new XMLHttpRequest();
	xmlHttp.open("post","upload.do",true);

	//上传进度事件
	xmlHttp.upload.onprogress=function(e){
	if(e.lengthComputable){
	var _progress=Math.round(e.loaded*100/e.total);
	if(_progress<=100){
	bar.style.width=_progress+"%";
	}
	}

	};

	var formData=new FormData();
	formData.append("file",file);
	xmlHttp.send(formData);


	}
	};




	})();

	</script>
	</body>
	</html>