第一步：npm install ng2-file-upload --save 安装 ng2-file-upload

第二步：在需要使用该插件的页面的对应module文件的imports中引入CommonModule  和  FileUploadModule

第三步：在对应的组件文件中引入并声明；

以下是new FileUploader()需要传入的参数列表，?号表示可选：

第四步：在组件.ts对应的html文件中添加input标签；如下：

multiple表示多选；
 
 第五步：在组件.ts文件中创建selectedFileOnChanged()方法，进行图片选择之后的操作，例如本地预览（将selectedImgUrl中的数据绑定到html）等。

 第六步：上传文件

第七步：完成图例：

后记：2017-07-21 10：44

如果出现下图的错误，肯能是因为没有导入第二步中的相关文件，也有可能是因为在第四步的input元素设置中缺少了ng2FileSelect

 

ionic2+Angular 使用ng2-file-upload 插件上传图片并实现本地预览的更多相关文章

  1. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  2. 图像本地预览插件（基于JQUERY、HTML5）

    最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样 ...

  3. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  4. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  5. 使用jQuery在上传图片之前实现缩略图预览

    使用jQuery在上传图片之前实现缩略图预览 jQuery代码 01 $("#uploadImage").on("change", function(){ 02 ...

  6. IE8/9 本地预览上传图片

    本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...

  7. angularjs file upload插件使用总结

    之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...

  8. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  9. JQuery File Upload 插件 出现 “empty file upload result” 错误的解决方案。

    本例中采用的是 JQuery File Upload + ASP.NET 的方式, Google了大半天基本没有找到合理的解决方案,倒是在 NodeJS的一遍博客中找到了灵感:http://www.i ...

随机推荐

  1. C++ #if #endif #define #ifdef #ifndef #if defined #if !defined详解 (转)

    (源)http://blog.csdn.net/sky1203850702/article/details/42024673 首先,让我们先从头文件开始,在很多头文件里,我们会看到这样的语句 #ifn ...

  2. 初识 ActiveMQ

    其实算不上初识了,工作一年来一直都有接触 mq 相关的东西.但是,从来都是粘贴复制别人的配置代码,却从未认真系统的学习过它,现在线上用 mq 的项目出问题了,老板在后面拿枪指着呢,不得不好好研究下了. ...

  3. [0] C#实现WebBrowser&HTML交互

    using System;using System.ComponentModel;using System.Windows.Forms; namespace WindowsApplication5{ ...

  4. LINUX centos 7.2/7.3 搭建LANP环境

    首先我们先查看下centos的版本信息 #适用于所有的linux lsb_release -a #或者 cat /etc/redhat-release #又或者 rpm -q centos-relea ...

  5. ELK-初识Elasticsearch

    第一篇:初识Elasticsearch 1.安装 Elasticsearch 要求 java8+的环境,推荐使用 Oracle 1.8.0_131版本的JDK.Java JDK的安装此处不做介绍.这里 ...

  6. OpenCV 之 神经网络 (一)

    人工神经网络(ANN) 简称神经网络(NN),能模拟生物神经系统对真实物体所作出的交互反应,是由具有适应性的简单单元(称为神经元)组成的广泛并行互连网络. 1  神经元 1.1  M-P 神经元 如下 ...

  7. 限制input[type=number]的输入位数策略整理

    当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...

  8. 查看表结构命令（mysql和oracle）

    MySQL查看表结构SQL语句 = mysql查看表结构命令,如下: desc 表名; show columns from 表名; describe 表名; show create table 表名; ...

  9. php7 安装yar 生成docker镜像

    Docker包含三个概念:(1)远程仓库即远程镜像库所有镜像的聚集地(不可进入操作).(2)本地镜像即从远程仓库拉取过来的镜像(3)运行起来的本地镜像叫做容器(分层的可操作)Docker使用:1.首先 ...

  10. 如何使用jedis进行发布订阅

    jedis实现发布订阅,是通过让发布者和订阅者同时对某个channel(频道)进行操作,订阅者订阅了某个频道例如channel1,发布者往这个channel1里面publish东西,在pubsubli ...