浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题、反馈类型、反馈内容、反馈人联系电话以及反馈图片。前端将这些反馈的元素POST给后台提供的接口;实现这个工作的步骤就是:页面布局——功能实现;
页面布局非常简单,难就难在功能,如果没有反馈图片这个元素,那么功能实现就更简单了,直接使用jquery中的$.ajax()方法提交表单数据给后台接口;但是因为表单元素中多了反馈图片这个元素,所以需要考虑到以下几个问题:
1、如何实现多张图片上传?
<input type="file" multiple/>文件上传的实现是指定input框的type属性(type=file包括multiple属性都是H5提供的功能)但是在这个实际场景中,要实现的是上传图片,除了图片之外的其他文件都不能上传。所以就有了第2 个问题:
2、上传文件类型的限制?
文件类型限制的实现方式我在反馈页面中用的是数组的indexOf()方法,首先列出图片有哪些类型,通俗讲就是图片有那些后缀名,如下:
var fileType = ["jpg","jpeg","png","bmp","gif"];目前我能想到的常用的图片类型就这么多。
其次,获取到选中图片的type=file输入框的值,在这个值中按照split(".")拆分成数组,最后.pop()将文件后缀名从数组中删除,这个方法会返回删除的元素。如下:
var type = document.getElementById("input[type='file']").innerHTML.split(".").pop();
fileType.indexOf(type.toLocaleLowerCase())!=-1 就表明选中的文件是图片。注意:数组的indexOF()方法使用的是===严格等于,也就是匹配值type必须跟fileType数组中的元素的类型以及值完全相等才可以。例如var fileType = ["index","of",12];
console.log(fileType.indexOf(1)———— -1 因为数组元素中没有 1 这个元素,数组不会再次通过12,将12与1进行匹配
console.log(fileType.indexOf(12)———— 2 返回匹配元素的下标
console.log(fileType.indexOf("index") ———— 0 返回匹配的元素的下标
到这里只是实现了多文件上传以及文件上传类型的限制的问题,接下来就是:
3、如何实现本地图片预览
本地图片预览说白了就是显示图片,显示图片的实现就是创建一个img标签,然后给img标签的src属性指定图片的值,那是不是将本地图片上的图片相对地址传入src属性中就可以了呢?正常来说这没有错,因为我们在html文件中就是这么干的,<img src="图片相对于html文件的地址"/>就可以在html页面制定的位置显示图片。但是在这里不行。为什么?因为这里是动态添加图片,跟前面提到的静态添加图片不一样。不过实现的思路还是一样,就是指定图片标签的src属性的值,只是这里需要对本地上传的图片的地址进行如下的处理:
var url = window.URL.createObjectURL(选中的图片)//不兼容IE。将本地图片的地址进行一种处理。
下面是我的实现本地图片预览的代码,这代码是原生js与jquery结合:
1 //多文件与单文件的判断,实现本地预览
2 function fileList(){
3 var num = document.getElementById("selFile").files;
4 if(num.length>1){
5 for(var i=0;i<num.length;i++){
6 ImgPre(i);
7 }
8 return ;
9 }
10 else{
11 ImgPre();
12 }
13 };
14 //文件本地预览;涉及到设计默认值
15 function ImgPre(){
16 //var i = 0||arguments[0],设置默认值,但是0比较特殊,会隐式转换为false,所以只有对i进行判断
17 var i = arguments[0];
18 var oDiv = $('<index;div></div>').css({"display":"inline-block","position":"relative","width":"50px","height":"50px","padding":"0","margin":"0 0 0 10px"});
19 //创建img元素
20 var img = $('<img></img>');
21 img.attr('id',"imgPre").css({"width":"50px","height":"50px"});
22 //获取图片地址
24 if(!i){
25 //如果没有传入实参就是用默认值0
26 var url = window.URL.createObjectURL(document.getElementById("selFile").files[0]);
27 }else{
28 var url = window.URL.createObjectURL(document.getElementById("selFile").files[i]);
29 }
30 img.attr('src',url);
31 //取消选择图片
32 var icon = $('<i class="remove iconcel"></i>').css({"position":"absolute","top":"-5px","right":"0","z-index":"999","display":"blcok","background":"red","color":"#fff","border-radius":"50%"}).click(function(){$(this).parent().remove()});
33 oDiv.append(icon);
34 oDiv.append(img);
35 $('.img_wrap').css("display","inline").append(oDiv);
36
37
浅谈js本地图片预览的更多相关文章
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js本地图片预览
相信大家都遇到过上传图片之前预览,网上找了很多,但都不是所有浏览器都支持,不过后来找到一个,但自己没有完全实验. 代码如下: <script> //使用IE条件注释来判断是否IE6,通过判 ...
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成 ...
- 自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
随机推荐
- [BOI2019][第K大问题][暴力剪枝]D2T1 Olympiads
目录 题意 输入格式 输出格式 样例 Input Output 数据范围 时间限制 思路 代码 题意 有\(N\)个人,现在你要从中选出\(K\)个人出来,然后让这\(K\)个人一起参加\(K\)场比 ...
- web Javascript360°全景实现
360 全景浏览是一种性价比很高的虚拟现实解决方案,给人一种全新的浏览体验,让你足不出户就能身临其境地感受到现场的环境.该技术被广泛地应用在房产.酒店.家居等领域. 下面我们使用三种方法讨论一个 36 ...
- Redis 新特性:多线程模型解读
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以备受关注. 主要特性如下: 多线程处理网络 IO: 客户端缓存: 细粒度权限控制(ACL): RESP3 ...
- 使用MariaDB backup恢复主从
安装 yum install MariaDB-backup 备份命令 工具需要直接操作数据目录,需要在数据库服务器上执行 mariabackup --backup --target-dir=/data ...
- 5月31日 python学习总结 JavaScript概述
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...
- Pulsar 也会重复消费?
背景 许久没有分享 Java 相关的问题排查了,最近帮同事一起排查了一个问题: 在使用 Pulsar 消费时,发生了同一条消息反复消费的情况. 排查 当他告诉我这个现象的时候我就持怀疑态度,根据之前使 ...
- 解决centos7服务器shadows已启动但是无法连接的问题
firewall-cmd --permanent --add-port=8989/tcp firewall-cmd --reload 这是由于centos7防火墙并没有开放ss端口的问题 添加json ...
- 关于使用charles进行mock步骤
1.应用场景: 1.1 测试环境中,可能存在部分依赖外部系统的http接口,因为外部系统未部署或服务不可用等其他原因,导致接口无法正常响应(特别是qa1环境): 而平时的测试主要还是以界面上的功能测试 ...
- mmap代替通用IO读取文件数据(curious)
提供一份测试demo: #include <stdio.h> #include <string.h> #include <stdlib.h> #include &l ...
- 《前端运维》五、k8s--1安装与基本配置
一.k8s基础概念与安装 k8s,即kubernetes是用于自动部署,扩展和管理容器化应用程序的开源系统.详细的描述就不多说了,官网有更详细的内容.简单来说,k8s,是一个可以操作多台机器调度部署镜 ...