Angular.js中上传指令ng-upload的基本使用教程


Posted in Javascript onJuly 30, 2017

前言

本文主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:

Angular上传指令ng-upload的基本使用,包括上传文件,图片,以及图片和视频在线预览,非常强大。ng-upload有两种用法,一种是选择上传文件,仅仅存起来,还有一种就是选择之后,立刻出发一个上传函数,虽然这个函数可以不做http upload的操作。

1.首先包含库文件

<script src="angular.min.js"></script>
 <!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
 <script src="ng-file-upload-shim.min.js"></script>
 <script src="ng-file-upload.min.js"></script>

2.只选择,有submit上传

Upload on form submit or button click
 <form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
 Single Image with validations
 <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
 ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
 ngf-resize="{width: 100, height: 100}">Select</div>
 Multiple files
 <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
 Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
 <button type="submit" ng-click="submit()">submit</button>
 </form>

3.选择之后,立马上传

Upload right away after file selection:
 <div class="button" ngf-select="upload($file)">Upload on file select</div>
 <div class="button" ngf-select="uploadFiles($files)" multiple="multiple">Upload on file select</div>
 Drop File:
 <div ngf-drop="uploadFiles($files)" class="drop-box"
 ngf-drag-over-class="'dragover'" ngf-multiple="true" 
 ngf-pattern="'image/*,application/pdf'">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

4.upload模块还能显示图片预览

Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'">
 Audio preview: <audio controls ngf-src="file"></audio>
Video preview: <video controls ngf-src="file"></video>

这个里面注意了:这里面的file不是图片路径,而是,ngf-select ng-model="file" name="file"操作的时候,或者ngf-select="upload($file)传给调用函数的那个file对象

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

Javascript 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
关于前后端json数据的发送与接收详解
Jul 30 #Javascript
jquery easyui如何实现格式化列
Jul 30 #jQuery
微信小程序对接七牛云存储的方法
Jul 30 #Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 #Javascript
Vue自定义指令详解
Jul 28 #Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 #Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
js 操作css实现代码
2009/06/11 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
基于Python实现文件大小输出
2016/01/11 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python 下载文件的多种方法汇总
2020/11/17 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
英语辞职信范文
2015/02/28 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书