Javascript/Angular:清除图像选择表单输入 [英] Javascript/Angular: clear image select form input
问题描述
所有这些都是成角度的.
All of this is in angular.
没有太多无聊的细节，我有一个图像上传按钮，实际上并没有上传图像.相反，虚拟"表单元素只是将信息传递到另一个数组，该数组仅显示图像的预览缩略图，并为用户提供删除任何他们不想上传的内容的选项.
Without too many boring details, I have an image upload button that doesn't actually upload images. Instead, the 'dummy' form element just passes information on to a different array that shows little preview thumbnails of the image and gives the user the option to delete any they don't want to upload.
除一个令人烦恼的细节外，所有这些工作都相当整洁(就像图像上传一样整洁)
All of this is working rather neatly (as neatly as image upload ever works), except for one irritating detail:
虚拟"按钮始终显示上次上传"的图像数量，即使用户可能已从实际记录数组中删除了这些图像.该按钮也可以多次使用，因此实际上有8个文件时，它可以显示"2个文件".或10.或0.
The 'dummy' button always displays the number of images last 'uploaded' even though the user might have deleted those images from the actual array of record. The button can also be used multiple times, so it could say '2 files' when in fact there are 8 files. Or 10. Or 0.
在将其内容添加到记录数组之后，我想通过控制器清空该输入，但是我不知道怎么做.
I want to empty that input via the controller after adding its contents to the array of record, but I can't figure out how.
I've tried nulling out the model for the input, per an SO answer that is:
vm.addImages=null;
没有运气.仍然是"2个文件".
No luck. Still '2 files'.
我已经尝试通过 SO回答在表单对象本身中翻滚，但我不想清除整个表单，只需清除这一个元素即可.
I've tried rummaging around in the form object itself, again via an SO answer but I don't want to clear the entire form, just this one element.
这是控制器中相关的$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:清除图像选择表单输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
