博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ng-file-upload(在单文件选择,并且通过点击“上传”按钮上传文件的情况下,如何在真正选择文件之前保留上一文件信息?)...
阅读量:6636 次
发布时间:2019-06-25

本文共 1976 字,大约阅读时间需要 6 分钟。

 文章前面研究ng-file-upload可能涉及指令:

You can use ng-model or ngf-change instead of specifying function for ngf-drop and ngf-select

ngf-change

"点击"、"取消"按钮不触发该事件,双击文件进行选择才触发

ng-before-model-change="beforeChange($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event)"

"点击"、"取消"按钮不触发该事件,双击文件进行选择才触发

ngf-keep(针对ngf-multiple="true" 多文件上传情况)

false: 默认状态

true: 保留上一次的文件信息基础上,追加新的文件信息

distinct: 去除files中重复的文件

ng-model

值为单文件而不是数组文件的条件:

1) ngf-multiple未设置或者设置为false

2) 元素上未设置multiple属性

3) ngf-keep未设置或者为false

综上条件:即为单文件上传情况,ng-model的值为单文件信息数据

 问题追踪思路:

ng-change 代替ng-model

$scope.standardFileChange = function($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event) {            console.log($files,$file,$newFiles, $duplicateFiles, $invalidFiles, $event);            if ($newFiles[0]) {                $scope.standardFile = $newFiles[0];            }        };

上述解决方案可以实现点击选择文件按钮情况下不清楚之前文件信息,但是如果有移除按钮就会出现状况!

         

 

$scope.removestandardFile = function() {

  delete $scope.standardFile;
};

因为

$scope.standardFile = $newFiles[0];数据双向绑定缘故导致变量出现问题!

继续问题的追踪

$scope.standardFile = angular.copy($newFiles[0]);

把双向绑定改为copy,然而发现打印出来并没有copy成功,再使用寻找到的自定义copy函数

function copy(obj) {            var clone = {};            for (var key in obj) {                clone[key] = obj[key];            }            return clone;  };

发现在传参的过程中,参数传的并不正确!

貌似要进行深度拷贝,继续寻找函数extendDeep函数

var extendDeep = function(dst) {          angular.forEach(arguments, function(obj) {            if (obj !== dst) {              angular.forEach(obj, function(value, key) {                if(angular.isObject(dst[key]) || angular.isArray(dst[key])){                  extendDeep(dst[key], value);                } else {                  dst[key] = angular.copy(value);                }                   });               }          });          return dst;};

重新试一遍,发现成功了!

$scope.standardFile = extendDeep($newFiles[0]);

果然是浅拷贝以及深拷贝的问题!!

 

 

 

转载于:https://www.cnblogs.com/echo2016/p/5752121.html

你可能感兴趣的文章
spring cloud
查看>>
Binder进程间通信(二)---- 驱动程序初始化
查看>>
redis sentinel 主从切换(failover)解决方案,详细配置
查看>>
Java 8: 从永久代(PermGen)到元空间(Metaspace)
查看>>
Lua 5.3.3 一个string.len的异常
查看>>
Hadoop2.2.0 入门教程(三)之HDFS SHELL脚本
查看>>
jquery banner 轮播配置方法
查看>>
Linux 关机前执行脚本
查看>>
Java 基础数据类型 、 == 、 equals
查看>>
Spring boot + io.springfox Swagger2 统一添加header 参数的方法:globalOperationParameters
查看>>
Java 复习 —— 一张图读懂多线程
查看>>
postgresql备份恢复之pg_dump大数据处理
查看>>
百万级数据下的mysql深度解析
查看>>
package-info.java——简介
查看>>
JavaScript 在数组指定位置插入元素
查看>>
URL匹配设计考
查看>>
使用hugo制作基于md文档的静态网站
查看>>
第四章-java多线程核心技术-Lock锁-第一篇
查看>>
运维监控工具选择
查看>>
HttpClient基本用法
查看>>