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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
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用户登录之cookie信息安全分析
2016/05/13 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
美容师的职业规划书
2013/12/27 职场文书
改革共识倡议书
2014/08/29 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
小升初自荐信范文
2015/03/05 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL