angular-file-upload插件的使用简单介绍
参考博客: https://www.cnblogs.com/jarson-7426/p/5191156.html
angular-file-upload
最近一段时间用了一下angular-file-upload的使用, 这里做简单的介绍.
angular-file-upload的github地址: https://github.com/nervgh/angular-file-upload
惯例,首先贴出这个插件的github地址:点这里
这是插件的api使用文档地址:点这里
这是官方使用插件编写的例子:点这里
例子中能够找到我们需要的文件。例子中的es5-shim.min.js文件是为老的浏览器兼容而引入的,所以这个插件真的很强大呀。
然后我们来一步步使用这个插件来实现文件上传的功能吧。
这个插件定义了几个指令:nv-file-drop
、nv-file-select
、uploader
从单词意思来看应该不难猜出,第一个支持文件脱拽选择,第二个是点击选择,uploader用于绑定在控制器中新建的upload对象。
html文件
<form class="form-horizontal" name="form">
<div class="form-line">
<label>请选择证书文件:</label><span class="small-tip">证书文件只支持.pem格式,文件大小1M以内</span>
<div class="choose-file-area">
<input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/>
<a href="javascript:;" class="choose-book">
<input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>浏览
</a>
</div>
</div>
<div class="form-line">
<label>请选择私钥文件:</label><span class="small-tip">私钥文件只支持.key格式,文件大小1M以内</span>
<div class="choose-file-area">
<input class="file-name" type="text" readonly="readonly" ng-model="fileItem1.name"/>
<a href="javascript:;" class="choose-key">
<input type="file" name="key" nv-file-select uploader="uploader1" ng-click="clearItems1()"/>浏览
</a>
</div>
</div>
<button type="submit" ng-click="UploadFile()">提交</button>
</form>
首先,注意这里需要上传两个文件,所以我创建两个upload对象,方便管理文件和处理回调函数。最后给上传按钮一个点击事件,同时处理两个对象的上传事件。
控制器文件
var app = angular.module('app', ['angularFileUpload']);
app.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) {
$scope.uploadStatus = $scope.uploadStatus1 = false; //定义两个上传后返回的状态,成功获失败
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php',
queueLimit: 1, //文件个数
removeAfterUpload: true //上传后删除文件
});
var uploader1 = $scope.uploader1 = new FileUploader({
url: 'upload.php',
queueLimit: 1,
removeAfterUpload: true
});
$scope.clearItems = function(){ //重新选择文件时,清空队列,达到覆盖文件的效果
uploader.clearQueue();
}
$scope.clearItems1 = function(){
uploader1.clearQueue();
}
uploader.onAfterAddingFile = function(fileItem) {
$scope.fileItem = fileItem._file; //添加文件之后,把文件信息赋给scope
};
uploader1.onAfterAddingFile = function(fileItem) {
$scope.fileItem1 = fileItem._file; //添加文件之后,把文件信息赋给scope
//能够在这里判断添加的文件名后缀和文件大小是否满足需求。
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
$scope.uploadStatus = true; //上传成功则把状态改为true
};
uploader1.onSuccessItem = function(fileItem,response, status, headers){
$scope.uploadStatus1 = true;
}
$scope.UploadFile = function(){
uploader.uploadAll();
uploader1.uploadAll();
if(status){
if(status1){
alert('上传成功!');
}else{
alert('证书成功!私钥失败!');
}
}else{
if(status1){
alert('私钥成功!证书失败!');
}else{
alert('上传失败!');
}
}
}
}])
总结
在上面的例子中,我定义了两个upload对象是因为要上传两个文件,每一次重新选择文件时应该覆盖之前选好的文件,所以如果定义一个对象时,有点不好操作覆盖的位置,而定义两个对象,在重新选择的时候,完全可以先清空当前对象的文件队列,再添加就好了。
其实后来我发现,也可以不定义两个upload对象,因为这个插件提供了一个removeFromQueue(index)
方法,index是文件队列数组中文件的index值。因为是两次选择文件,所以把长度控制在2,然后每次选择的时候调用这个方法,根据位置传入0或者1就好了。
如果需要实现同一个窗口能够多选文件,使用加上
<input type="file" multiple="true" />
即可。如果需要限制文件类型,可以使用
<input type="file" accept="image/*" />'
即可。accept取值类型列表:
accept="application/msexcel"
accept="application/msword"
accept="application/pdf"
accept="application/poscript"
accept="application/rtf"
accept="application/x-zip-compressed"
accept="audio/basic"
accept="audio/x-aiff"
accept="audio/x-mpeg"
accept="audio/x-pn/realaudio"
accept="audio/x-waw"
accept="image/*"
accept="image/gif"
accept="image/jpeg"
accept="image/tiff"
accept="image/x-ms-bmp"
accept="image/x-photo-cd"
accept="image/x-png"
accept="image/x-portablebitmap"
accept="image/x-portable-greymap"
accept="image/x-portable-pixmap"
accept="image/x-rgb"
accept="text/html"
accept="text/plain"
accept="video/quicktime"
accept="video/x-mpeg2"
accept="video/x-msvideo"
这个插件还提供了很多的配置参数,对象方法和回调函数。这可以去这里查看详细文档:点这里
angular-file-upload插件的使用简单介绍的更多相关文章
- angularjs file upload插件使用总结
之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...
- jQuery File Upload 插件 php代码分析
jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据 在进入initialize()中的po ...
- jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
- JQuery File Upload 插件 出现 “empty file upload result” 错误的解决方案。
本例中采用的是 JQuery File Upload + ASP.NET 的方式, Google了大半天基本没有找到合理的解决方案,倒是在 NodeJS的一遍博客中找到了灵感:http://www.i ...
- 对于stark(curd)插件的使用简单介绍
一.创建表 from django.db import models from django.db import models class Department(models.Model): &quo ...
- jquery file upload + asp.net 异步多文件上传
百度了很久,国内一直 找不到 使用jquery file upload 插件 +asp.net 的相关代码 一开始使用 jquery uploadify ,一款基于 flash的插件,但是不支持 Sa ...
- jQuery File Upload文件上传插件简单使用
前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...
- jQuery File Upload 文件上传插件使用一 (最小安装 基本版)
jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...
- unity Dotween插件的简单介绍及示例代码
unity里面做插值动画的插件有许多,比较常见的有itween.hotween.dotween.根据大家的反馈和实际体验来说,dotween插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...
随机推荐
- DomainObjectUtility
using System; using System.Collections; using System.Collections.Generic; using System.Collections.S ...
- Yahoo34条军规——雅虎WEB前端网站优化
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...
- [题解]Magic Line-计算几何(2019牛客多校第三场H题)
题目链接:https://ac.nowcoder.com/acm/contest/883/H 题意: 给你偶数个点的坐标,找出一条直线将这n个点分成数量相等的两部分 并在这条直线上取不同的两个点,表示 ...
- 迪杰斯特拉算法(Dijkstra)
模板一: 时间复杂度O(n2) int dijkstra(int s,int m) //s为起点,m为终点 { memset(dist,,sizeof(dist)); //初始化,dist数组用来储存 ...
- WebForm 用户控件 委托 实现 textbox后台赋值 调用端处理实现 textchange
新建一个简单的用户控件,如下图所示 textbox只读,button按钮模拟实现一堆业务逻辑后对textbox赋值. 用户控件后台代码也很简单 public partial class UTTCont ...
- 为什么tcp-wrappers被Redhat Centos Fedora废弃?
1 简述 TCP wrappers is a simple tool to block incoming connection on application level. This was very ...
- 通过URL传参数,然后第二个页面需要获取参数
/** * 方法说明:通过url参数键值名称获取参数的值 * @method getQueryString * @param name 要获取的参数键值 * @return * @remark */ ...
- WEBRTC三种类型(Mesh、MCU 和 SFU)的多方通信架构
WebRTC 本身提供的是 1 对 1 的通信模型,在 STUN/TURN 的辅助下,如果能实现 NAT 穿越,那么两个浏览器是可以直接进行媒体数据交换的:如果不能实现 NAT 穿越,那么只能通过 T ...
- 区间节点的lca
题目hdu5266 分析:多节点的LCA就是dfs序中最大最小两个节点的LCA.所以只要每次维持给出节点的dfs序的最大最小,然后就是两点的LCA 代码: rmq的st+lca的倍增 #include ...
- 在tkinter中使用matplotlib
import sys import tkinter as Tk import matplotlib from numpy import arange, sin, pi from matplotlib. ...