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插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...
随机推荐
- 搜索的应用--计算最优解: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, ...
- 正则finditer的使用
import re #\. 是刚需必须有 d+ 必须一个或多个数字 pattern = re.compile(r'\d+\.\d*') d = pattern.finditer('3.14159265 ...
- cmd中java的编译命令——java和javac、javap
最近重新复习了一下java基础,这里便讲讲对于一个类文件如何编译.运行.反编译的.也让自己加深一下印象 如题,首先我们在桌面,开始->运行->键入cmd 回车,进入windows命令行 ...
- 面试题。线程pingpong的输出问题
第一种情况:public class Main { public static void main(String args[]) { Thread t = new Thread() { public ...
- Java8 Stream流API常用操作
Java版本现在已经发布到JDK13了,目前公司还是用的JDK8,还是有必要了解一些JDK8的新特性的,例如优雅判空的Optional类,操作集合的Stream流,函数式编程等等;这里就按操作例举一些 ...
- 使用python开启你的opencv之旅---图像的读入,存储
python的便捷是如此的引人着迷,而opencv给python提供的接口使我们能够使用python来快速验证我们的想法,或者与别的模块快速结合,在这个系列文章我会通过jupyter notebook ...
- 笔记72 高级SSM整合
遇到的问题: 1.进行spring mvc测试的时候报错 测试代码: package com.li.test; import com.github.pagehelper.PageInfo; impor ...
- loadrunner 11安装教程
见百度经验,大神教程 https://jingyan.baidu.com/article/da1091fb199da7027849d6ff.html
- 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...
- 全栈开发React-私有路由
demo import React from 'react'; import {Route,Redirect} from 'react-router-dom' import {connect} fro ...