本地多图上传预览
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>本地单图上传预览</title> 9 </head> 10 <body> 11 12 <input type="file" name="" id="imgUpBtn" multiple onchange="javascript:setImagePreviews()"> 13 <div id="addPictures"></div> 14 15 16 <script type="text/javascript"> 17 function setImagePreviews() { 18 var fileUp = document.getElementById("imgUpBtn"); 19 var addImgs = document.getElementById("addPictures"); 20 addImgs.innerHTML = ""; 21 var fileList = fileUp.files; 22 for (var i = 0; i < fileList.length; i++) { 23 addImgs.innerHTML += "<img id='img" + i + "' />"; 24 var imgObjPreview = document.getElementById("img" + i); 25 imgObjPreview.style.width = '150px'; 26 imgObjPreview.style.height = '150px'; 27 imgObjPreview.src = window.URL.createObjectURL(fileUp.files[i]); 28 } 29 } 30 </script> 31 32 33 <!--<script type="text/javascript">--> 34 35 <!--//下面用于多图片上传预览功能--> 36 37 <!--function setImagePreviews() {--> 38 39 <!--// 上传按钮--> 40 <!--var fileUp = document.getElementById("imgUpBtn");--> 41 42 <!--// 获取需要添加图片的父元素--> 43 <!--var addImgs = document.getElementById("addPictures");--> 44 45 <!--// 每次调用时令元素内内容为空--> 46 <!--addImgs.innerHTML = "";--> 47 48 <!--// 图片地址类数组--> 49 <!--var fileList = fileUp.files;--> 50 51 <!--// 循环类数组--> 52 <!--for (var i = 0; i < fileList.length; i++) {--> 53 54 <!--// 向元素内添加图片标签--> 55 <!--addImgs.innerHTML += "<img id='img" + i + "' />";--> 56 57 <!--// 获取图片id,每次循环赋值给imgObjPreview的id都不同--> 58 <!--var imgObjPreview = document.getElementById("img" + i);--> 59 60 <!--// 判断--> 61 <!--if (fileUp.files && fileUp.files[i]) {--> 62 63 <!--//火狐下,直接设img属性--> 64 65 <!--imgObjPreview.style.width = '150px';--> 66 67 <!--imgObjPreview.style.height = '150px';--> 68 69 <!--// 每次循环都向图片标签添加路径--> 70 <!--imgObjPreview.src = window.URL.createObjectURL(fileUp.files[i]);--> 71 72 <!--}--> 73 74 <!--else {--> 75 76 <!--//IE下,使用滤镜--> 77 78 <!--fileUp.select();--> 79 80 <!--var imgSrc = document.selection.createRange().text;--> 81 82 <!--alert(imgSrc)--> 83 84 <!--var localImgId = document.getElementById("img" + i);--> 85 86 <!--//必须设置初始大小--> 87 88 <!--localImgId.style.width = "150px";--> 89 90 <!--localImgId.style.height = "150px";--> 91 92 <!--//图片异常的捕捉,防止用户修改后缀来伪造图片--> 93 94 <!--try {--> 95 96 <!--localImgId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";--> 97 98 <!--localImgId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;--> 99 100 <!--}--> 101 102 <!--catch (e) {--> 103 104 <!--alert("您上传的图片格式不正确,请重新选择!");--> 105 106 <!--return false;--> 107 108 <!--}--> 109 110 <!--imgObjPreview.style.display = 'none';--> 111 112 <!--document.selection.empty();--> 113 114 <!--}--> 115 116 <!--}--> 117 118 <!--return true;--> 119 120 <!--}--> 121 122 <!--</script>--> 123 </body> 124 </html>
留下你的足迹求推荐呦
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
js判断是否是pc端打开还是手机端打开
根据浏览器头判断是使用神马设备打开的网页 <script type="text/javascript"> function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs br...
- 下一篇
opensuse使用zypper安装软件
安装软件(opensuse) opensuse 通过zypper可以方便的进行软件管理,类似centos的yum 软件。 命令参考 软件包操作 搜索软件 zypper search package 安装软件 zypper install package 安装某个版本的软件包 zypper install package=version 安装以某个单词名字开头的所有软件包 zypper install package* 卸载某个软件包 zypper remove package 升级某个软件包 zypper update package 获取所有可用新包的列表 zypper list-updates 检验软件包的依赖关系的完整性 zypper verify package 执行系统升级 zypper dist-upgrade 执行源代码软件安装和其依赖 zypper source-install package.tgz 配置源仓库 zypper通过软件源进行软件包的搜索,如果安装系统时使用CDROM进行操作,那么软件源会指向一个"cd://"的地址。 这样便无法从网上下载软件。 通过zy...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS8安装Docker,最新的服务器搭配容器使用
- 设置Eclipse缩进为4个空格,增强代码规范
- Red5直播服务器,属于Java语言的直播服务器
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS7,8上快速安装Gitea,搭建Git服务器