关键词：
前些日子项目中遇到了一个问题（移动端项目），就是在反馈页面点击上传图片的时候，实现在本地读取照片并预览的效果，这样的实现效果可以避开把图片上传到服务器在预览的尴尬，具体的页面展示效果如下：
具体的代码如下（偷个懒，也为了大家看的更方便，就截图了...）
在这里面按钮的呈现样式是通过字体实现的，用的是阿里图标库，然后在图标的上面就是图中的input按钮了，只是input给它全透明了，所以我们看到的是一个"十"字的标志，这里面input的类型是file，accept是指上传文件的类型，这里面我们可以对要上传的文件进行一些限制，因为上传的是图片，所以图片的目录是image，此外还有audio、video，但是现在还没有对文件类型进行限制，所以要在他们的后面加上（如图片）.gif、.png等等，想省事，那就直接image/*了，这样的话选择的范围也广一些，当然，实际项目中还是需要根据具体要求来做的，这一步做完之后，就会直接调用本地的文件夹了，Android效果如下：
苹果手机效果如下：
苹果手机的话是支持拍照的，Android不支持，效果出现之后，就是通过js代码进行相应的操作了，代码如下：
// 函数 从手机上导入预览照片 function readURL(input) if (input.files && input.files[0]) var reader = new FileReader();//FileReader() 用于读取文件 reader.readAsDataURL(input.files[0]);//异步加载文件 reader.onload = function (e) $(".imgAddButton").before("<li><img src="+e.target.result+" /></li>"); // 计算预览照片数量 $(".popUpImgTitle>span:last-child>i:first-child").html($(".popUpImgList>ul>li").length-1); // 调用函数 从手机上导入预览照片 $("#imgInp").change(function() if (parseInt($(".popUpImgTitle>span:last-child>i:first-child").html()) < 4) readURL(this); else mui.alert("图片添加已达上限"," "); );
因为只能上传四张图片，所以我对其进行了一个判断，主要的代码还都是在readURL()函数里面，其中$("#imgInp")是指点击的那个完全透明的input，input.files是指判断是否上传了文件，input.files[0]是指这个文件数组里面的第一个，如果条件都为真，那么就创建一个FileReader() 实例，作用就是读取文件用的，是文件的API，具体可以参考这个网址 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader，其中readAsDataURL用于异步加载文件，加载完成之后通过onload()函数进行相关的操作，图片的路径是e.target.result获取到，并把它座位img的src，好了，到此上传图片的功能就实现了，具体的效果如下：
但是现在上传的方式是一张一张上传的，不是太方便，后期再研究了，参考的网址有两个，感谢他们的帮助
https://www.cnblogs.com/wuxiexy/p/6738928.html
http://blog.csdn.net/taohai123/article/details/53302405
转载请注明出处，谢谢。
vue中input标签上传本地文件或图片后获取完整路径，如e:medicineofchstageimagexxx.jpg(代码片段)
前言：好久没有写vue了。今天遇到一个需求：使用input框来上传图片类型，并且在选择之后立刻回显出来。使用<inputtype=“file”/>在选定图片后再<imgsrc=“xxx”/>。今天在实现这个需求的时候主要是出现... 查看详情
解决谷歌input自动填充问题(代码片段)
...lete="new-password"碰到的问题：目前我有一个input标签是单独使用的，该标签下是没有密码输入的这种情况下给标签添加autocomplete= 查看详情
解决viewer.js动态更新图片导致无法预览的问题(代码片段)
1、viewer.js使用Demohttp://fengyuanchen.github.io/viewerjs/2、viewer.js下载地址https://github.com/fengyuanchen/viewerjs3、viewer只能初始化一次，也就是说如果用ajax添加了新的图片，你再初始化新添加的图片还是出不来，只有第一次初始化加载的图片... 查看详情
django头像上传预览功能(代码片段)
...览生成默认的头像上传默认图片到指定文件夹，然后把img标签的src指定到这里就可以，点击头像上传图片默认添加了<inputtype="file">后会在图片下面显示上传文件夹的选项，这个和我们当初想的不一样，我们可以通过把i... 查看详情
input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求，多使用input标签。本文主要介绍input标签的样式美化和实现图片预览。 用到的知识点有： 1、input标签的使用 2、filelist对象和file对象 3、fileReader对象样式美化 原... 查看详情
input标签与图片按钮水平对齐解决方法
...日，小编的朋友就来咨询，说他也遇到了这个问题，并且使用margin、padding等Css语法，都没有解决。 解决方法其实很简单，我们只要加上vertical-align:middle属性就可以了。 来看实例： 提示：您可以先修改部分... 查看详情
上传图片时预览
简述 本文的使用场景主要是用户修改头像，选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。1.首先，页面上有一个input[type=‘file‘]标签<inputid="head"name="headPortrait"class="btnbtn-xmbtn-outlinebtn-primary"style="margin:... 查看详情
javascript实现本地图片上传预览功能（兼容iechromeff）(代码片段)
...com参考：http://blog.csdn.net/nhconch/article/details/7295456需要解决的问题有：本地图片如何在上传前预览、编辑；最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和c... 查看详情
android本地预览excel,word,ppt,pdf[解决androidasposed转excel乱码问题](代码片段)
Android本地预览Excel,Word,PPT,PDF解决Androidasposed转Excel乱码问题近期获得一个需求,要求做一个类似WPS的功能,不过只需要预览不需要编辑Android本身没有提供预览Office的组件,百度后发现腾讯TBS可以做到这一点,试了下,效果不尽人意;附腾... 查看详情
头像的上传的实现(代码片段)
...splay:none"></div></div>实现了这个替换后，我们在使用时，就会发现，选择了图片后，不能显示，所以我们就要针对这个来实现预览功能预览功能的实现：<divclass="form-group"> <labelclass="col-sm-2control-la... 查看详情
使用input的file进行上传进行预览(代码片段)
在使用file上传文件的时候，想到了图片预览的功能，然后查询了一些资料，一种是需要后端配合，将数据变成base64或者buff等数据传给后端然后调取接口进行显示，但是这种需要后端的配合和网络请求，感觉不如在纯前端操作方... 查看详情
饿了么ui组件库中，image组件预览图片错位的解决(代码片段)
使用过elementUI组件库中的Image组件基本都知道，其组件会自带一个图片预览功能，仅需要通过preview-src-list传入需要预览的图片url列表即可实现点击预览。博主使用了此功能，进行数组的循环渲染，具体渲染代码如... 查看详情
图片上传预览(代码片段)
...ame="picurl"></div></div> 接下来我写js代码（我使用的是jQuery框架）$("#picurl").on("change",function(e)//当我们选择文件给表单时触发的事件varfile=e.target.files[0];//获取文件信息varfileRead=newFileReader() 查看详情
图片上传组件开发(代码片段)
...个功能，图片的预览，图片的剪裁及预览。预览图片用户使用：用户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中。组件调用：开发者可以自己定义... 查看详情
h5拍照选择图片上传组件核心(代码片段)
...）。遂进行了调研，发现很多的工具。但有的太大，有的使用麻烦，有的不满足使用需求。决定自己写一个h5移动端图片上传组件。图片上传是一个比较普遍的需求，PC端还好，移动端就不是特别好做了。下面将过程中一些重点... 查看详情
记录一个移动端图片预览（支持旋转），使用css强制旋转的坑(代码片段)
...设置想要的偏移位置，但是我没有实现。<5>最后改为使用viewer.js实现需求功能<6>ImagePreview实现图片预览的代码点击查看代码<van-image-preview:loop="swipePlayState===\'2\'?true:false":start-position="current"ref="imagePreview":min-zoom="1/3"class=... 查看详情
解决uniapp组件uni-file-picker设置:disable-preview=“true“关闭预览不生效的问题-禁用图片预览无效的手动解决办法(代码片段)
效果图图片上传后，依然保持“不预览”的样子Bugs按照官方手册设置:disable-preview="true"mode="grid"依然会显示预览图H5无法通过$ref获取到组件进行clearFiles操作，<uni-file-pickerref="xx">[Vuewarn]:Erro 查看详情
图片上传组件开发(代码片段)
...我也就整这么一个吧，再细化一下需求。图片的预览用户使用：用户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中。组件调用：开发者可以自... 查看详情