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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
Three.js学习之网格
Aug 10 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
EsLint入门学习教程
Feb 17 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 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调用Oracle存储过程
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python的列表List求均值和中位数实例
2020/03/03 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
客户接待方案
2014/02/26 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
MySql新手入门的基本操作汇总
2021/05/13 MySQL