html5带拖拽上传的图片gallary

改的别人的程序，不能说原创吧，算半个原创

<!DOCTYPE html>
<!-- saved from url=(0066)http://enjoyhtml5.com/hackathons/20110626/photo-gallery/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>html5演示相册</title>
	  <script language="javascript" type="text/javascript" src="./gallary/jquery-1.4.2.min.js"></script>
  <style type="text/css" media="screen">
    body {
      bbackground-color: black;
      color: white;
      font-family: Verdana, Arial;
      font-size: 12px;
      background: -webkit-gradient(radial, 50% 410, 1, 50% 410, 200, from(white), to(black));
    }

    #container {
      width: 100%;
      height: 700px;
      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -webkit-perspective-origin: 50% 225px;
    }

    #shape {
      position: relative;
      top: 160px;
      margin: 0 auto;
      height: 140px;
      width: 140px;
      -webkit-transform-style: preserve-3d;
    }
   
    .plane {
      position: absolute;
      height: 140px;
      width: 140px;
      border: 1px solid white;
      -webkit-border-radius: 12px;
      -webkit-box-sizing: border-box;
      text-align: center;
      font-family: Times, serif;
      font-size: 100pt;
      color: black;
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-transition: -webkit-transform 2s, opacity 2s;
      -webkit-backface-visibility: hidden;
    }

    #shape.backfaces .plane {
      -webkit-backface-visibility: visible;
    }
   
    #shape.spin{
      -webkit-animation: spin 10s infinite linear;
    }

    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(-360deg); }
    }

    /* ---------- ring styles ------------- */
    .controls {
      width: 80%;
      margin: 0 auto;
      padding: 5px 20px;
      -webkit-border-radius: 12px;
      background-color: rgba(255, 255, 255, 0.5);
      line-height:23px;
    }

    .controls input[type="checkbox"] {
      margin-left: 0;
    }

    .controls input[type="range"] {
      height: 6px;
      margin-left: 15px;
    }
	html {height:100%;}
	body {margin:0;padding:0;border:3px solid orange;height:100opx;}
	</style>
</head>
<body>

  <div id="container" style="-webkit-perspective-origin-y: -10px; ">
    <div id="shape" class="spin ring backfaces">
      <div id="second" class="plane" style="-webkit-transform: translateZ(270px);">1</div>
    </div>
  </div>
	<button id="getCount">图片数量</button>
	<script>
	if (FileReader) {
		var container = document.body,
			getCountButton = document.getElementById("getCount"),
			imgArray = [];

		getCountButton.addEventListener("click", function() {
			alert(imgArray.length);
		}, true);
		
		var isImage = function(type) {
			switch (type) {
				case "image/jpeg":
				case "image/png":
				case "image/gif":
				case "image/bmp":
				case "image/jpg":
					return true;
				default:
					return false;
			}
		};
		
		container.addEventListener("dragenter", function(event) {
			this.setAttribute("style", "border-style:dashed;");
		}, false);
		
		container.addEventListener("dragover", function(event) {
			event.stopPropagation();
			event.preventDefault();
		}, false);
		
		container.addEventListener("drop", function(event) {
			event.stopPropagation();
			event.preventDefault();
			
			var files = event.dataTransfer.files;
			for (var i = 0, j = files.length; i < j; i++) {
				var file = files[i];
				if(!/image\/\w+/.test(file.type)){
					alert("请确保文件为图像类型");
					return false;
				}
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(event){
					AddDiv(this.result);
					imgArray.push(this.result);
				}
			};		
		}, false);
		
		container.addEventListener("dragleave", function(event) {
			this.setAttribute("style", "");
		}, false);
		
		
		
	}
	function AddDiv(imgsrc)
	{
	if($("#second")!=null)
	{
		$("#second").remove();
	}
	
	var length= parseInt($("#shape div").size())+1;
		
	
	
	/*if(length==1)
	{
		var divcsh="<div id='one"+length+"' class='plane' ";
		divcsh+="style='-webkit-transform: rotateY(0deg) translateZ(270px);'>";
		divcsh+=length;
		divcsh+="</div>"
		
		$("#shape").append(divcsh);
	}
	*/
	var m=0;
	if(length>10)
	{
		m=25*length;
	}
	else
	{
		m=250;
	}
	for(var i=1;i<length;i++)
	{
		var Xjd=parseInt(360*i/length);
		
		$("#one"+i).css("-webkit-transform","rotateY("+Xjd+"deg) translateZ("+m+"px)");
	}
	
	var div="<div id='one"+length+"' class='plane' ";
	div+="style='-webkit-transform: rotateY(0deg) translateZ("+m+"px);'>";
	div+="<img src='";
	div+=imgsrc;
	div+="' />";
	div+="</div>";
	
	$("#shape").append(div);
	
	
	}
	</script>

</body></html>