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 相关文章推荐
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
js类 from qq
2006/11/13 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Django中使用Celery的教程详解
2018/08/24 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
办公室文秘自我评价
2013/09/21 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
预备党员公开承诺书
2014/05/28 职场文书
普通党员对照检查材料
2014/08/28 职场文书
社会实践活动总结
2015/02/05 职场文书
2015政治思想表现评语
2015/03/25 职场文书
大学校园招聘会感想
2015/08/10 职场文书
高中语文教学反思范文
2016/02/16 职场文书