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中的中文参数存到数据库乱码问题
关于java中的中文参数乱码问题,遇见过很多,若开发工具的字符集环境和数据库的字符集环境都一样,存到数据库中还是乱码的话,可以通过以下方法解决: 用数据库客户端检查每个字段的字符集和字符集校对和这个表 ...
- win8安装sql2008及设置登陆名问题
1. .net3.5安装 使用win8系统自带的升级功能无法成功安装.其实Windows8安装文件中已经集了.Net3.5, (1)此时只需要使用虚拟光驱加载Windows8 ...
- <iOS 组件与框架> -- UIKit Dynamics
UIKit Dynamics 结合 『iOS 组件与框架 』一书.总结的知识点与demo demo 地址: GitHub地址 一.概述 1.UIKit Dynamics 是 iOS 7 新增的内容.其 ...
- Nginx+Keepalived 主备高可用 安装与配置
环境说明:操作系统:CentOS6.7 x86_64Nginx版本:nginx-1.9.7Keepalived版本:keepalived-1.2.24 主nginx + Keepalived :10. ...
- SICP-1.5-控制结构
测试 DOCSETS 在docstring中直接添加测试 def sum_naturals(n): """Return the sum of the first n na ...
- Filter自动登录
Dao层略过 Domain略过 Service层过 Web层 Select逻辑 获取表单数据,Web-service--Dao返回用户信息 如果返回不为null否则,重定向到登录页面.则判断用户是否勾 ...
- crontab问题处理
用pyhton写了一些爬虫,由于数据量比较大,需要跑的时间也比较长,所以将代码部署到服务器上.选择用crontab完成爬虫的定时爬取数据,这样避免了人工的干预,减少一些人为错误.但在部署crontab ...
- cordova.js的坑
最近在使用cordova开发app,一开始只引用了cordova.js,cordova通过function exec(){}来链接本地和H5,之前代码被下载到了本地,在苹果和android上都能实现功 ...
- php5.6在yum下安装redis
yum install redis php-redis --enablerepo=remi,remi-php56 设置redis开机自动启动,具体路径以实际为准, echo "/usr/bi ...
- 关于ZendStudio 10.5的破解
一. 下载ZendStudio 10.5 首先下载ZendStudio 10.5 我使用的是mac版 下载地址是: http://downloads.zend.com/studio-eclipse/1 ...