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 相关文章推荐
js如何实现设计模式中的模板方法
Jul 23 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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抽象类 介绍
2012/06/13 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php查询及多条件查询
2017/02/26 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
jqgrid 简单学习笔记
2011/05/03 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
商务英语专业自荐信
2013/10/14 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
学校司机岗位职责
2013/11/14 职场文书
优质服务演讲稿
2014/05/14 职场文书
好听的队名和口号
2014/06/09 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
2014年绿化工作总结
2014/12/09 职场文书
创业计划书之面包店
2019/09/17 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Windows10下安装MySQL8
2021/04/06 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js