关键词：
最近在工作中遇到一个问题，就是实现一个反馈页面，这个反馈页面的元素有反馈主题、反馈类型、反馈内容、反馈人联系电话以及反馈图片。前端将这些反馈的元素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实现图片上传本地预览
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情
js兼容各个浏览器的本地图片上传即时预览效果
...了下这方面的的问题，所以也就做了个简单的demo来实现本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看... 查看详情
本地多个图片上传预览，删除
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="js/jquery-2.1.4.min.js"type="text/javascript"charset="utf-8"></s 查看详情
使用input选择本地图片，并且实现预览功能(代码片段)
1、使用input标签选择本地图片文件用一个盒子来存放预览的图片 2、JS实现预览 首先添加一个inputchange事件，再用到 URL.createObjectURL()方法 用来创建URL的 File 对象或者 Blob 对象? 这时候就能可以选... 查看详情
本地上传图片预览
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>图片上传本地预览，获得图片的base64(可压缩)</title><styletype="text/css">.uplo 查看详情
javascript预览本地图片
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content="buexplain"><metaname="Keywords"co 查看详情
原生js和css实现点击图片预览放大(代码片段)
效果：代码实现，可以直接复制到本地测试（把图片路径换一下）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>3.图片预览</title><st 查看详情
html5上传本地图片,在线预览及裁剪(filereader,canvas)
...览一下，使用filereader方法无需和后台交互，代码如下：//本地图片在上传之前的预览效果//图片上传预览functionpreviewImage(file){if(file.files&&file.files[0]){varimg=document.getElementById(‘imghead‘);varreader=newFi 查看详情
图片本地上传预览
在IE里面显示的话，你可以用div直接显示图片，不通过img来添加SRC，这样就不会有小图标出现例子：<divclass="banner_up_pic"id="imgPreDiv"></div>varfile_upl=document.getElementById("file"); file_upl.select(); 获取图片路径 varim 查看详情
上传图片时预览
简述 本文的使用场景主要是用户修改头像，选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。1.首先，页面上有一个input[type=‘file‘]标签<inputid="head"name="headPortrait"class="btnbtn-xmbtn-outlinebtn-primary"style="margin:... 查看详情
使用input标签解决本地图片预览的问题(代码片段)
...端项目），就是在反馈页面点击上传图片的时候，实现在本地读取照片并预览的效果，这样的实现效果可以避开把图片上传到服务器在预览的尴尬，具体的页面展示效果如下：具体的代码如下（偷个懒，也为了大家看的更方便，... 查看详情
js:s上次预览，上传图片预览，图片上传预览
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情
编辑图片时，能够实时显示上传的图片（预览）
...ObjectURL(this.files[0]);//获取图片的路径，该路径不是图片在本地的路径 if(objUrl){ $(".hide_imgimg").attr("src",objUrl);//将图片路径存入src中，显示出图片 }});//建立一個可 查看详情
js实现的图片预览功能
之前的博文有实现过图片上传预览，但那种方法是预览时就将图片上传，会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览，就说用js将上传的图片显示，上传代码在之前的博文中有写到。以下是实现的代码：body... 查看详情
浏览器本地预览图片window.url.createobjecturl
第一种方式<scripttype="text/javascript">functionsetImagePreview(){vardocObj=document.getElementById("ctl00_ContentMain_file_head");varfileName=docObj.value;if(!fileName.match(/.jpg|.gif|.png|.bmp/i)) 查看详情
java如何将本地图片变成网络url再把url传给前台
JAVA如何将本地图片变成网络URL再把URL传给前台功能就是想把本地图片预览预览要通过URL。。。。返回流的话怎么写能详细点吗？参考技术A用js的滤镜功能可以实现不上传图片的预览例如： 1.获取上传图片的路径，一般直接获... 查看详情
jquery图片上传前先在本地预览（不经过后端处理）
前段时间遇到一个问题，前端想实现图片上传预览（不经过后端PHP或JAVA处理），用户点击file按钮上传文件，点击确定马上就能看到预览的效果，但在实现的时候无论怎样都取不到file上图片的真实路径，得到的反而是C:fakepatha.jpg... 查看详情
对于图片缩放预览查看js插件
zoomify.js是一款非常实用的jQuery图片放大预览Lightbox插件。zoomify.js可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户的体验度。使用该图片放大预览插件需要在页面中引入jqu... 查看详情