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 相关文章推荐
js parentElement和offsetParent之间的区别
Mar 23 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
javascript入门教程基础篇
Nov 16 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php sybase_fetch_array使用方法
2014/04/15 PHP
php绘制一条直线的方法
2015/01/24 PHP
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python列表(List)知识点总结
2019/02/18 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python如何对齐字符串
2020/07/30 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
ET Mall东森购物网:东森严选
2017/03/06 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
物业门卫岗位职责
2013/12/28 职场文书
大学生志愿者感言
2014/01/15 职场文书
《手指教学》反思
2014/02/14 职场文书
干部鉴定材料
2014/05/18 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
高一语文教学反思
2016/02/16 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers