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代码经典广告
Oct 21 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
PHP define函数的使用说明
2008/08/27 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
如何清空Session
2015/02/23 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
大一新生学期自我评价
2014/04/09 职场文书
天猫活动策划方案
2014/08/21 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
分享python函数常见关键字
2022/04/26 Python