ionic2+Angular 使用ng2-file-upload 插件上传图片并实现本地预览
第一步:npm install ng2-file-upload --save 安装 ng2-file-upload

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


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


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

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

第七步:完成图例:

后记:2017-07-21 10:44
如果出现下图的错误,肯能是因为没有导入第二步中的相关文件,也有可能是因为在第四步的input元素设置中缺少了ng2FileSelect

ionic2+Angular 使用ng2-file-upload 插件上传图片并实现本地预览的更多相关文章
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- 图像本地预览插件(基于JQUERY、HTML5)
最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样 ...
- JQuery插件:图片上传本地预览插件,改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- 使用jQuery在上传图片之前实现缩略图预览
使用jQuery在上传图片之前实现缩略图预览 jQuery代码 01 $("#uploadImage").on("change", function(){ 02 ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- angularjs file upload插件使用总结
之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...
- jQuery File Upload 插件 php代码分析
jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据 在进入initialize()中的po ...
- JQuery File Upload 插件 出现 “empty file upload result” 错误的解决方案。
本例中采用的是 JQuery File Upload + ASP.NET 的方式, Google了大半天基本没有找到合理的解决方案,倒是在 NodeJS的一遍博客中找到了灵感:http://www.i ...
随机推荐
- Java NIO学习笔记一 Java NIO概述
Java NIO概述 Java NIO(新的IO)是Java的替代IO API(来自Java 1.4),这意味着替代标准的 java IO和java Networking API.Java NIO提供 ...
- Phpcms·二次开发
PHPCMS V9产品介绍 PHPCMS V9(简称V9)采用PHP5+MYSQL做为技术基础进行开发.V9采用OOP(面向对象)方式进行基础运行框架搭建.模块化开发方式做为功能开发形式.框架易于功能 ...
- (转)让浏览器支持Webp
转载:https://segmentfault.com/a/1190000005898538?utm_source=tuicool&utm_medium=referral Webp介绍 web ...
- Java中的static、final关键字
static static 的含义是静态的,是一个静态修饰符,一般来说,被static修饰的有以下几种,类.变量.方法.代码块. static修饰类 Java中普通的类是不允许被声明为静态的,但是有一 ...
- ffmpeg参数说明
ffmpeg.exe -i F:\慶哥\慶哥之歌.mp3 -ab 56 -ar 22050 -b 500 -r 15 -s 320x240 f:\11.flv ffmpeg -i F:\01.wmv ...
- Github站点英文翻译
1.Github首页 Pull requests Issues Gist 请求 问题 要点 ----------------------------------------------------- ...
- Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
- chrome谷歌浏览器-DevTool开发者工具-详细总结
目录: 一.概述 1.官方文档 2.打开方法: 3.前言: 二.九个模块: 1.设备模式Device Mode 2.元素面板Elements 3.控制台面板Console 4.源代码面板Sources ...
- javascript对象转换,动态属性取值
$(document).ready(function(){ var exceptionMsg = '${exception.message }'; var exceptionstr = ''; //j ...
- 【Android Developers Training】 25. 保存文件
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...