图片拖拽上传
2016-07-15 17:41
344 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="html5/js/jquery-2.0.0.min.js"></script> </head> <body> <div name="image" id="dropbox" style="position:relative;min-width:300px;min-height:100px;text-align: center;line-height:100px;color:#777;font-size:32px;border:3px dashed silver;"> <input style="color:#fff;width:100%;height:100px;margin:0px auto;cursor:pointer;position:absolute;top:0px;right:0px;opacity:0;filter: alpha(opacity=0);" id="myfile" name="myfile" type="file" > 请拖拽图片放到这里 </div> <div style="width: 250px;height: 250px;"> <img id="showimg" style="min-width: 250px;height: 250px;" src="" /> <p id="inofimg" style="width: 150px;height: 50px;"></p> </div> </body> <script type="text/javascript"> $(function(){ $(document).on({ dragleave:function(e){ e.preventDefault(); }, drop:function(e){ e.preventDefault(); }, dragenter:function(e){ e.preventDefault(); }, dragover:function(e){ e.preventDefault(); } }); var dropboxfile = document.getElementById("dropbox"); dropboxfile.addEventListener('drop',function(e){ e.preventDefault(); var fileList = e.dataTransfer.files; var fileNum = fileList.length; if(fileNum==0){ return false; } if(fileList[0].type.indexOf('image')=== -1){ alert('该文件不是图片'); return false; } var imgurl = window.URL.createObjectURL(fileList[0]); var imgname = fileList[0].name; var imgsize = Math.floor((fileList[0].size)/1024); if(imgsize>1024){ alert('文件大小不能超过1M'); return false; } var info = "<span>文件名'"+imgname+"'</span><span>文件大小'"+imgsize+"'kb</span>"; $("#showimg").attr('src',imgurl); $("#inofimg").html(info); }) }); </script> </html>
这里主要用到三个 一个是html5的这个几个拖动dragleave,drop,dragenter,dragover,二是addEventListener监听,三个是html5的file的API
相关文章推荐
- oracle 锁表 如何解锁
- 详解Java 8中Stream类型的“懒”操作
- July 15th 模拟赛C T3 最小最大和 Solution
- <gs:video-vod>和<gs:video-live>是有区别的
- 数据库无法远程登录
- 中国剩余定理CRT (互质)
- 面试题36:数组中的逆序对
- Sparse Convolution neural networks
- IBM CleanQuest使用方法
- 【旧代码整理】分享带cookie的PHP Curl操作class,再简单说说curl配合socks5代理、IP变身
- 【Android】使用Gradle实现分渠道打包,指定应用名称,应用图标,应用标识和环境切换
- 浅谈消息队列
- JavaScript的open()方法:打开新窗口
- Xcode 创建.a和framework静态库
- MFCC
- C#中一个简单的输入输出流
- Gerrit日常操作命令收集
- CnCrypt代码 之 为对话框动态增加菜单
- 5个你必须知道的JavaScript和Web Debug技术
- angularjs 刷新 404