第一步: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. Vivado2015.4使用教程(一个完成工程的建立)

    双击桌面的vivado图标,(可能有点慢) 弹出主菜单界面,点击create new project 这是介绍界面,next~ 添加好工程名,和工程位置,next~ 选择rtl Project,nex ...

  2. .Net中的AOP系列之《AOP实现类型》

    返回<.Net中的AOP>系列学习总目录 本篇目录 AOP是如何跑起来的 运行时编织 复习代理模式 动态代理 编译时编织 后期编译(PostCompiling) 来龙去脉 运行时编织 VS ...

  3. re 学习随便

    . 任意一个字符 \转义字符 *  字符重复0--多次 + 字符重复1-多次 ? 字符重复0-1次 ^行首匹配 或者在一个字符集中表示取反 \$  匹配字符串末尾 \b 匹配\w 与\w 之间的 \B ...

  4. Elasticsearch索引和文档操作

    列出所有索引 现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...

  5. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. banner自动生成工具,ascii文字展示

    前言 post@ Ryan-Miao@github.io Spring-Boot里有个banner的功能,刚开始觉得很鸡肋.然而,现在觉得蛮有意思的.无聊的程序员. 生成文字 大部分工具只支持英文的库 ...

  7. android studio IDE 下,设置ACTIVITY全屏

    因为ANDROID STUDIO的JAVA类是继承AppCompatActivity的 ,所以常规的全屏设置并不管用.如果要设置全屏,请参照如下代码/ 1/首先,打开AndroidManifest.x ...

  8. Windows下安装Python扩展模块提示Unable to find vcvarsall.bat的问题

    本文内容 Unable to find vcvarsall.bat的问题描述 问题分析 总结 提示: 如果你只是想知道自己需要安装哪个版本的Visual Studio请直接查看本文最后一个小节的内容. ...

  9. js传宗接代---继承

    前几天重温了一下js的继承,今天分享给大家: 一,类式继承. 所谓的类式继承就是:第二个类的原型prototype被赋予了第一个类的实例,如subcals.prototype=new supercls ...

  10. 关于ArcGIS Android的在x86和x64系统中兼容性的问题与解决方案

    我们都知道,在配置ArcGIS Android SDK时,需要在jniLibs目录下放置三个文件夹,分别是armeabi.armeabi-v7a.x86三个文件夹,ArcGIS Android针对目标 ...