Angular2 ng2-file-upload使用FileReader在网页中显示用户选择图片

ng2-file-upload是一个angular2的文件上传指令插件，可支持拖拽上传、单选上传、多选上传等功能，具体使用方法可去github查看。地址：https://github.com/valor-software/ng2-file-upload

FileReader是什么？

FileReader是一个可操作文件的web api，可以将用户选择的文件转行成所需格式的接口，例如二进制数据、Base64格式数据等。具体详情功能以及浏览器支持可查看Mozilla开发者中心。地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
在这里我们就需要把图片数据装换成Base64格式数据，直接插入img标签的src属性中。

FileReader.readAsDataURL(file)参数怎么获得

在这里我们可以直接使用插件所实例化的FileUploader对象取得用户上传的原始file对象。插件使用方法直接查看原文档。

注意：当使用插件在file_input change方法中获得FileUploader对象后，是无法直接访问JS原始File对象的，原始File对象存储在FileUploader的some属性中，但是这个属性是私有的，所以必须手动去修改一下插件的源码，将some属性的protected删掉。

我这里只使用到了单独上传的功能，因此我在file-item.class.d.ts中删除了对应字段的protected。

在view中插入对应的src即可

例如我这里的component所示，因为我是将用户每一次选择的图片都生成示例显示在页面中所以我使用数组去显示。

页面效果

这样不需要上传文件，也可以直接展示图片。

注意：使用这种方法时一定要考虑到浏览器是否支持FileReader接口，我这里是因为是一个后台使用到，不需要考虑除chrome外其他的浏览器，因此我可以直接使用。

Angular2 ng2-file-upload使用FileReader在网页中显示用户选择图片相关推荐

如何在微信分享的网页中显示描述和图片
微信分享网页显示图片和标题隐藏网址由于项目需要,需要在微信公众号中添加分享,显示图片和标题这个分享是需要jssdk 才能展示图片和标题的开发文档 https://developers.w ...
在html中加入pdf文件吗,如何在网页中显示PDF文件
我们是不是对百度文库能直接在网页上显示PDF文件感到好奇,你是否也想实现这样的功能?很多朋友认为可以直接在网页中插入代码就可以实现这个功能,其实要在网页中完整地显示PDF文件,需要把PDF文件转换成S ...
将VS2005中的.CS文件在网页中显示的方法
今天在做AccessMembershipProvider的DEMO时,想把支持Access数据库提供程序的源码在网页中显示出来,可是复制源码后在网页中显示的是不换行的,后来我在尝试了很多办法后,终于有 ...
html网页中显示乱码的问题解决
在网页中显示中文乱码. 情景: 在html页面写了个javacript的代码,里面有alert("中文"),但弹窗出来的对话框显示的是中文乱码. 解决: 在head头加 <m ...
Ifvisible.js – 判断网页中的用户是闲置还是活动状态
ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...
非常好的在网页中显示pdf的方法
今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...
网页中显示xml，直接显示xml格式的文件
第一种方法使用<pre></pre>包围代码(在浏览器中测试不行啊,但是在富编辑器中又可以,怪): 使用<xmp></xmp>包围代码(官方不推荐,但 ...
html显示docx,网页中显示PDF的HTML代码.docx
网页中显示PDF的HTML代码您可能想打开文档至某一特别页面或目标,或显示书签.要与链接一起放入一个动作命令,可紧接在 PDF 文件名后面键入数字符号 (#) 和该命令.以下表格显示可能的动作命令 ...
在html中显示word,如何在浏览器网页中显示word文件内容
把word文件读到byte[]中,再Response.OutputStream.Write(bytes)到客户端去 Page_Load事件中写: //FileStream fs = new ...