参考博客: 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-dropnv-file-selectuploader

从单词意思来看应该不难猜出,第一个支持文件脱拽选择,第二个是点击选择,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插件的使用简单介绍的更多相关文章

  1. angularjs file upload插件使用总结

    之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...

  2. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  3. jQuery File Upload blueimp with struts2 简单试用

    Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题  虽然图片都可以上传  但是response报错  我下载的是8.8.7木有问题   但是8.8.7版本结合修改main. ...

  4. JQuery File Upload 插件 出现 “empty file upload result” 错误的解决方案。

    本例中采用的是 JQuery File Upload + ASP.NET 的方式, Google了大半天基本没有找到合理的解决方案,倒是在 NodeJS的一遍博客中找到了灵感:http://www.i ...

  5. 对于stark(curd)插件的使用简单介绍

    一.创建表 from django.db import models from django.db import models class Department(models.Model): &quo ...

  6. jquery file upload + asp.net 异步多文件上传

    百度了很久,国内一直 找不到 使用jquery file upload 插件 +asp.net 的相关代码 一开始使用 jquery uploadify ,一款基于 flash的插件,但是不支持 Sa ...

  7. jQuery File Upload文件上传插件简单使用

    前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...

  8. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

  9. unity Dotween插件的简单介绍及示例代码

    unity里面做插值动画的插件有许多,比较常见的有itween.hotween.dotween.根据大家的反馈和实际体验来说,dotween插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...

随机推荐

  1. DomainObjectUtility

    using System; using System.Collections; using System.Collections.Generic; using System.Collections.S ...

  2. Yahoo34条军规——雅虎WEB前端网站优化

    雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...

  3. [题解]Magic Line-计算几何(2019牛客多校第三场H题)

    题目链接:https://ac.nowcoder.com/acm/contest/883/H 题意: 给你偶数个点的坐标,找出一条直线将这n个点分成数量相等的两部分 并在这条直线上取不同的两个点,表示 ...

  4. 迪杰斯特拉算法(Dijkstra)

    模板一: 时间复杂度O(n2) int dijkstra(int s,int m) //s为起点,m为终点 { memset(dist,,sizeof(dist)); //初始化,dist数组用来储存 ...

  5. WebForm 用户控件 委托 实现 textbox后台赋值 调用端处理实现 textchange

    新建一个简单的用户控件,如下图所示 textbox只读,button按钮模拟实现一堆业务逻辑后对textbox赋值. 用户控件后台代码也很简单 public partial class UTTCont ...

  6. 为什么tcp-wrappers被Redhat Centos Fedora废弃?

    1 简述 TCP wrappers is a simple tool to block incoming connection on application level. This was very ...

  7. 通过URL传参数,然后第二个页面需要获取参数

    /** * 方法说明:通过url参数键值名称获取参数的值 * @method getQueryString * @param name 要获取的参数键值 * @return * @remark */ ...

  8. WEBRTC三种类型(Mesh、MCU 和 SFU)的多方通信架构

    WebRTC 本身提供的是 1 对 1 的通信模型,在 STUN/TURN 的辅助下,如果能实现 NAT 穿越,那么两个浏览器是可以直接进行媒体数据交换的:如果不能实现 NAT 穿越,那么只能通过 T ...

  9. 区间节点的lca

    题目hdu5266 分析:多节点的LCA就是dfs序中最大最小两个节点的LCA.所以只要每次维持给出节点的dfs序的最大最小,然后就是两点的LCA 代码: rmq的st+lca的倍增 #include ...

  10. 在tkinter中使用matplotlib

    import sys import tkinter as Tk import matplotlib from numpy import arange, sin, pi from matplotlib. ...