浅谈js本地图片预览

Posted ronin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈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">&#xe624;</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本地图片预览的主要内容,如果未能解决你的问题,请参考以下文章

js 预览本地上传图片

js 上传图片本地预览缓存

js实现图片上传本地预览

原生JS和CSS实现点击图片预览放大

原生JS和CSS实现点击图片预览放大

本地多个图片上传预览,删除