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 相关文章推荐
JQuery datepicker 用法详解
Dec 25 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
深入理解node.js http模块
Jan 24 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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操作SVN版本服务器类代码
2011/11/27 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
python黑魔法之编码转换
2016/01/25 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
机械专业求职信
2014/05/25 职场文书
经典团队口号大全
2014/06/21 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
批评与自我批评范文
2014/10/15 职场文书
体育教师个人总结
2015/02/09 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年化验员工作总结
2015/04/10 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
Elasticsearch 基本查询和组合查询
2022/04/19 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python