html5带拖拽上传的图片gallary

来源：互联网发布：怎么对数据进行标准化编辑：程序博客网时间：2024/05/17 02:56
改的别人的程序，不能说原创吧，算半个原创
<!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>