学习使用AngularJS文件上传控件  更新时间:2016年02月16日 08:51:27   投稿:lijiao   这篇文章主要帮助大家学习使用AngularJS文件上传控件angular-file-upload,感兴趣的小伙伴们可以参考一下 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件。并且规定文件格式和文件大小。因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用…但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法。好东西要分享,所以现在跟大家分享一下他的使用方法,如果大家正好需要使用,希望能帮到大家。 上传按钮的样式 首先我想先说一下上传文件的按钮样式,为什么呢?大家都知道上传会用到这个标签。,这行代码的默认样式真的有点不好看,见下图: 在一个稍微有点逼格的网站中,这样一个样式实在是有点损失形象了,而且如果需要在前面加一个输入框来显示文件名的话,那默认的显示文件名的区域怎么隐藏掉呢?别急,继续看: 用一个a标签包住input标签,然后把input标签的opacity设为0,就可以了嘛!ok,看代码: html: 浏览 浏览 然后是css文件: .filename{ width: 300px; height: 30px; line-height: 30px; } a{ width: 50px; text-align: center; height: 30px; line-height: 30px; position: raletive; cursor: pointer; overflow:hidden; display: inline-block; } a input{ position: absolute: left: 0; top: 0; opacity: 0; } 大功告成了!!!你看到的样式就变成了这样了,见下图: 你可以控制前面的输入框来显示你选择了的文件名,是不是好看多了呢? angular-file-upload 例子中能够找到我们需要的文件。例子中的es5-shim.min.js文件是为老的浏览器兼容而引入的,所以这个插件真的很强大呀。 然后我们来一步步使用这个插件来实现文件上传的功能吧。 这个插件定义了几个指令:nv-file-drop、nv-file-select、uploader 从单词意思来看应该不难猜出,第一个支持文件脱拽选择,第二个是点击选择,uploader用于绑定在控制器中新建的upload对象。 html文件 请选择证书文件:证书文件只支持.pem格式,文件大小1M以内 浏览 请选择私钥文件:私钥文件只支持.key格式,文件大小1M以内 浏览 提交 首先,注意这里需要上传两个文件,所以我创建两个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就好了。 如果需要实现同一个窗口能够多选文件,使用加上即可。 如果需要限制文件类型,可以使用’即可。 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” 这个插件还提供了很多的配置参数,对象方法和回调函数。 更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。 以上就是关于AngularJS文件上传控件的使用方法介绍,希望对大家的学习有所帮助。 您可能感兴趣的文章: js 实现 input type=”file” 文件上传示例代码 JS文件上传神器bootstrap fileinput详解 原生JS实现前端本地文件上传 原生JS和jQuery版实现文件上传功能 JS简单实现文件上传实例代码(无需插件) ajaxFileUpload.js插件支持多文件上传的方法 分享5个好用的javascript文件上传插件 SpringBoot+Vue.js实现前后端分离的文件上传功能 基于HTML5+js+Java实现单文件文件上传到服务器功能 原生JS实现文件上传 AngularJS 文件上传 上传控件 相关文章 Angular.JS通过指令操作DOM的方法 这篇文章主要给大家介绍了Angular.JS通过指令操作DOM的方法,文中给出了详细的介绍和示例代码,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-05-05 详解angular笔记路由之angular-router 本篇文章主要介绍了详解angular笔记路由之angular-router,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 Angular 多级路由实现登录页面跳转(小白教程) 这篇文章主要介绍了Angular 多级路由实现登录页面跳转(小白教程),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-11-11 浅析AngularJS中的生命周期和延迟处理 这篇文章主要介绍了浅析AngularJS中的生命周期和延迟处理,是AngularJS中较为核心的深层次内容,需要的朋友可以参考下 2015-06-06 AngularJS 整理一些优化的小技巧 本文主要介绍AngularJS 一些优化上的小技巧,这里整理了几种方法供大家参考,有兴趣的小伙伴可以参考下 2016-08-08 Angular.JS中的this指向详解 这篇文章主要给大家介绍了关于Angular.JS中this指向的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-05-05 基于AngularJs select绑定数字类型的问题 今天小编就为大家分享一篇基于AngularJs select绑定数字类型的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angularjs实现下拉框联动的示例代码 本篇文章主要介绍了Angularjs下拉框联动的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 理解AngularJs指令 这篇文章主要介绍了AngularJs指令 2015-12-12 Angular4自制一个市县二级联动组件示例 本篇文章主要介绍了Angular4自制一个市县二级联动组件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 最新评论

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图:

需要同时上传两个文件。并且规定文件格式和文件大小。因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用…但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法。好东西要分享,所以现在跟大家分享一下他的使用方法,如果大家正好需要使用,希望能帮到大家。

上传按钮的样式
首先我想先说一下上传文件的按钮样式,为什么呢?大家都知道上传会用到这个标签。<input type=”file”/>,这行代码的默认样式真的有点不好看,见下图:

在一个稍微有点逼格的网站中,这样一个样式实在是有点损失形象了,而且如果需要在前面加一个输入框来显示文件名的话,那默认的显示文件名的区域怎么隐藏掉呢?别急,继续看:

用一个a标签包住input标签,然后把input标签的opacity设为0,就可以了嘛!ok,看代码:

html:

 <div>
 <input class="filename" type="text" readonly="readonly" />
 <a href="javascript:;" name="file">
  <input type="file" name="key"/>浏览
 </a>
 </div>
 <div>
 <input class="filename" type="text" readonly="readonly" />
 <a href="javascript:;" name="file">
  <input type="file" name="key"/>浏览
 </a>
 </div>

然后是css文件:

.filename{
 width: 300px;
 height: 30px;
 line-height: 30px;
}
a{
 width: 50px;
 text-align: center;
 height: 30px;
 line-height: 30px;
 position: raletive;
 cursor: pointer;
 overflow:hidden;
 display: inline-block;
}
a input{
 position: absolute:
 left: 0;
 top: 0;
 opacity: 0;
}

大功告成了!!!你看到的样式就变成了这样了,见下图:

你可以控制前面的输入框来显示你选择了的文件名,是不是好看多了呢?

angular-file-upload

例子中能够找到我们需要的文件。例子中的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"

这个插件还提供了很多的配置参数,对象方法和回调函数。

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是关于AngularJS文件上传控件的使用方法介绍,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  • js 实现 input type=”file” 文件上传示例代码
  • JS文件上传神器bootstrap fileinput详解
  • 原生JS实现前端本地文件上传
  • 原生JS和jQuery版实现文件上传功能
  • JS简单实现文件上传实例代码(无需插件)
  • ajaxFileUpload.js插件支持多文件上传的方法
  • 分享5个好用的javascript文件上传插件
  • SpringBoot+Vue.js实现前后端分离的文件上传功能
  • 基于HTML5+js+Java实现单文件文件上传到服务器功能
  • 原生JS实现文件上传
张贴在3