参考博客: 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. 搜索的应用--计算最优解:Aizu - ALDS1_4_D Allocation

    搜索的应用-计算最优解 题目: You are given nn packages of wiwi kg from a belt conveyor in order (i=0,1,...n−1i=0, ...

  2. 正则finditer的使用

    import re #\. 是刚需必须有 d+ 必须一个或多个数字 pattern = re.compile(r'\d+\.\d*') d = pattern.finditer('3.14159265 ...

  3. cmd中java的编译命令——java和javac、javap

    最近重新复习了一下java基础,这里便讲讲对于一个类文件如何编译.运行.反编译的.也让自己加深一下印象   如题,首先我们在桌面,开始->运行->键入cmd 回车,进入windows命令行 ...

  4. 面试题。线程pingpong的输出问题

    第一种情况:public class Main { public static void main(String args[]) { Thread t = new Thread() { public ...

  5. Java8 Stream流API常用操作

    Java版本现在已经发布到JDK13了,目前公司还是用的JDK8,还是有必要了解一些JDK8的新特性的,例如优雅判空的Optional类,操作集合的Stream流,函数式编程等等;这里就按操作例举一些 ...

  6. 使用python开启你的opencv之旅---图像的读入,存储

    python的便捷是如此的引人着迷,而opencv给python提供的接口使我们能够使用python来快速验证我们的想法,或者与别的模块快速结合,在这个系列文章我会通过jupyter notebook ...

  7. 笔记72 高级SSM整合

    遇到的问题: 1.进行spring mvc测试的时候报错 测试代码: package com.li.test; import com.github.pagehelper.PageInfo; impor ...

  8. loadrunner 11安装教程

    见百度经验,大神教程 https://jingyan.baidu.com/article/da1091fb199da7027849d6ff.html

  9. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

  10. 全栈开发React-私有路由

    demo import React from 'react'; import {Route,Redirect} from 'react-router-dom' import {connect} fro ...