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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
vue设置一开始进入的页面教程
Oct 28 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Python类的专用方法实例分析
2015/01/09 Python
Python创建系统目录的方法
2015/03/11 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
10个示例带你掌握python中的元组
2020/11/23 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
linux下进程间通信的方式
2014/12/23 面试题
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python