Angular angular-file-upload文件上传的示例代码


Posted in Javascript onAugust 23, 2018

问题描述

附件上传

检定结果以附件形式上传。

Angular angular-file-upload文件上传的示例代码

这里先不考虑api

实现的任务就是,点击选择文件,选择之后可以清楚掉该文件。

插件介绍

用到了项目映入过的一个插件,angular-file-upload。

angular-file-upload AP:https://github.com/nervgh/angular-file-upload

进入正题,我们如何安装,还是老样子安利波npm

npm install angular-file-upload

插件很简单,就是一个指令,我们在它提供给我们的指令中声明一个uploader对象,这个对象表示在不同的时间下要执行什么操作,另一种观察者模式。

功能实现

使用指令

官网给出了该指令的很多种用法,这里选择最简单的,Single,单文件上传。

Angular angular-file-upload文件上传的示例代码

<input type="file" nv-file-select uploader="uploader"/>

一个file类型的input,使用nv-file-select指令,传给该指令一个uploader对象作为参数。

很简单的逻辑,新建一个FileUploader的对象,然后重写它的onAfterAddingFile方法,就是在文件添加完成之后,也就是点击选择文件,选中文件,点击完成之后执行的一个方法。

此方法中我们直接对文件进行上传操作。

// 新建文件上传实例
self.uploader = new FileUploader();

// 重写文件添加后的方法
self.uploader.onAfterAddingFile = function(fileItem) {
  // 打印日志
  if (config.debug) { console.info('onAfterAddingFile', fileItem); }
  // 上传文件
  self.upload(fileItem);
};

// 传给视图
$scope.uploader = self.uploader;

如果将文件上传封装成指令,以上代码应该方法指令的controller方法中执行!!!

关于指令中的compilecontrollerlink的执行详解,请参考正确地使用 Angular Directive 中的 compile,controller 与 link。

原因分析

可能是nv-file-select指令在实现时在link函数中进行各种事件的绑定,绑定时就需要我们的uploader对象。

而如果我们将其放在了link函数里,该指令的link函数是晚于nv-file-selectlink函数执行的,所以无效。

upload

// 上传文件
self.upload = function(data) {
  // 上传文件
  AttachmentService.uploadFile(data._file)
    .then(function success(response) {
        // 将上传成功的附件绑定再ngModel中
        $scope.ngModel = response.data;
        // 显示上传按钮
        self.showClear();
      }, function error() {
        // 提示用户上传失败
        sweetAlert.swal({
          title: "对不起",
          text: "上传的附件不能大于1M,请确认附件是否大于1M"
        });
      });
};

清空

用户上传错了文件怎么办呢?添加一个清空按钮,如果上传文件之后就显示。

// 清空选中文件
self.clear = function() {
  self.deleteFile(scope.ngModel.id);
};

// 删除附件
self.deleteFile = function(id) {
  AttachmentService.deleteFile(id, function success() {
    // 将附件赋为空对象
    scope.ngModel = undefined;
    // 隐藏清空按钮
    self.hideClear();
  });
};

scope.clear = self.clear;

但是这里会有一个问题,这里仅仅是删除了服务器上的附件,而文件的选中效果还是在的,这里还是显示选中的文件名的。

Angular angular-file-upload文件上传的示例代码

解决方案就是用一个form把它套起来,将button的类型设置为reset,点击按钮时,就会清空input中的内容了。

<form name="formInner" novalidate>
  <fieldset>
    <label class="col-sm-4 control-label">附件</label>
    <div class="col-sm-4">
      <input type="file" nv-file-select uploader="uploader"/>
    </div>
    <div class="col-md-4">
      <button type="reset" ng-if="params.showClearOrNot" ng-click="clear()" class="btn btn-xs btn-default">清除</button>
    </div>
  </fieldset>
</form>
<form>
  <input ng-model="xxx" />
  <yunzhi-upload-file ng-model="work.apply.attachment"></yunzhi-upload-file>
</form>

设置为reset之后就会出现新的问题,因为是在一个form表单里套的这个指令,所以reset,将其他的也都清空了。

ng-form

ng-form解决了问题。

这是ng-form指令的官方解释:

HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.

HTML不允许嵌套form元素,ng-form被用来嵌套form,如果一个子的form组需要被验证。

但是ng-form并没有实现form的功能,ng-submit就不能使用,想想这样设计也是合理的,如果ng-form也能submit,嵌套form,一个submitbutton,提交谁?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
JS实现的简单分页功能示例
Aug 23 #Javascript
JavaScript实用代码小技巧
Aug 23 #Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 #Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 #Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 #Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python中的编码知识整理汇总
2016/01/26 Python
使用python实现ANN
2017/12/20 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
物业招聘计划书
2014/01/10 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
餐饮店长岗位职责
2015/04/14 职场文书