Html5之图片拖放上传
转载：提升用户体验：HTML5 拖放文件上传http://gandli.blog.163.com/blog/static/3084958420101023274347/
<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>HTML5 浏览器拖放 | HTML5 Drag and drop</title> <style>#section{font-family: "Georgia", "微软雅黑", "华文中宋";} .container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3px solid #ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}.preview{max-width:360px;}#files-list{position:absolute;top:0;left:500px;}#list{width:460px;}#list .preview{max-width:250px;}#list p{color:#888;font-size:12px;}#list .green{color:#09c;} </style></head><body> <div id="section"> <p>把你的图片拖到下面的容器内：</p> <div id="container" class="container"> </div><div id ="files-list"><p>已经拖进过来的文件：</p><ul id="list"></ul></div> </div><script>if (window.FileReader) {var list = document.getElementById('list'),cnt = document.getElementById('container');// 判断是否图片function isImage(type) {switch (type) {case 'image/jpeg':case 'image/png':case 'image/gif':case 'image/bmp':case 'image/jpg':return true;default:return false;}}// 处理拖放文件列表function handleFileSelect(evt) {evt.stopPropagation();evt.preventDefault();var files = evt.dataTransfer.files;for (var i = 0, f; f = files; i++) {var t = f.type ? f.type : 'n/a',reader = new FileReader(),looks = function (f, img) {list.innerHTML += '<li><strong>' + f.name + '</strong> (' + t +') - ' + f.size + ' bytes<p>' + img + '</p></li>';cnt.innerHTML = img;},isImg = isImage(t),img;// 处理得到的图片if (isImg) {reader.onload = (function (theFile) {return function (e) {img = '<img class="preview" src="' + e.target.result + '" title="' + theFile.name + '"/>';looks(theFile, img);};})(f)reader.readAsDataURL(f);} else {img = '"o((>ω< ))o"，你传进来的不是图片！！';looks(f, img);}}}// 处理插入拖出效果function handleDragEnter(evt){ this.setAttribute('style', 'border-style:dashed;'); }function handleDragLeave(evt){ this.setAttribute('style', ''); }// 处理文件拖入事件，防止浏览器默认事件带来的重定向function handleDragOver(evt) {evt.stopPropagation();evt.preventDefault();}cnt.addEventListener('dragenter', handleDragEnter, false);cnt.addEventListener('dragover', handleDragOver, false);cnt.addEventListener('drop', handleFileSelect, false);cnt.addEventListener('dragleave', handleDragLeave, false);} else {document.getElementById('section').innerHTML = '你的浏览器不支持啊，同学';}</script> </body></html>
页:
[1]