Html5 拖放上传图片
2015-07-23 10:56
495 查看
<!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]; 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>
相关文章推荐
- HTML5引擎Construct2技术剖析(一)
- 基于HTML5全屏图文左右滑动切换特效
- 开玩笑html5(五岁以下儿童)---绕地球月球,地球绕太阳运动(canvas实现,同样可以移动哦)
- Html5学习第一天
- HTML5实现留言和回复页面样式
- html5+FormData 实现ajax文件上传
- 【指南】关于HTML5,营销人应该知道的概念、方法和推广完全实战指南
- 解决浏览器不支持HTML5和CSS3
- 门素材
- HTML5
- HTML5图片 拖放上传
- html5 绘制椭圆
- H5照片预览
- 调查问卷Html5发展综述
- 认识HTML5的WebSocket通讯
- canvas初体验
- html5的八大特性
- HTML5手机应用的最大优势就是可以在网页上直接调试和修改
- HTML5的设计目的是为了在移动设备上支持多媒体
- 【阅读】《head first html5》第三章——事件与处理程序