gpt4 book ai didi

Javascript/Angular : clear image select form input

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:13:45 25 4
gpt4 key购买 nike

所有这些都是 Angular 。

没有太多无聊的细节,我有一个图片上传按钮,实际上并不上传图片。相反,“虚拟”表单元素只是将信息传递到一个不同的数组,该数组显示图像的小预览缩略图,并为用户提供删除他们不想上传的任何内容的选项。

除了一个恼人的细节外,所有这一切都工作得相当巧妙(就像图像上传一样巧妙):

choose file screenshot

“虚拟”按钮始终显示最后“上传”的图像数量,即使用户可能已从实际记录数组中删除了这些图像。该按钮也可以多次使用,因此它可以显示“2 个文件”,而实际上有 8 个文件。或 10。或 0。

我想在将其内容添加到记录数组后通过 Controller 清空该输入,但我不知道该怎么做。

根据 SO answer,我已经尝试nulling 输入模型即:

vm.addImages=null;

运气不好。仍然是“2 个文件”。

我再次通过 SO answer 尝试在表单对象本身中翻找但我不想清除整个表单,只清除这一个元素。

这是来自 Controller 的相关$watch:

$scope.$watch('vm.addImages', function() {
if(vm.addImages.length){
_.each(vm.addImages, function(image){
vm.building.images.push(image);
});
vm.addImages = null; //this is the issue.
}
});

有什么想法吗?

谢谢。

最佳答案

清晰的函数应该定义如下

$scope.clear = function () {
angular.element("input[type='file']").val(null);
};

检查下面的代码段。

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', function($scope){
$scope.uploadFile = function(){
var file = $scope.myFile;

console.log('file is ' );
console.dir(file);

var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};

$scope.clear = function () {
angular.element("input[type='file']").val(null);
};

}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app = "myApp">

<div ng-controller = "myCtrl">

<input type = "file" ng-model = "myFile" file-select="file"/>

<button ng-click="clear()">clear</button>
</div>
</body>

关于Javascript/Angular : clear image select form input,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37842136/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com