帮助我解决问题的最新代码
$scope.uploadedFiles = [];
$scope.upload = function(files) {
$scope.uploadedFiles = files;
angular.forEach(files, function(file) {
if (file && !file.$error) {
if($scope.uploadedFiles.indexOf(file) == -1) {
$scope.uploadedFiles.push(file);
}
file.upload = Upload.upload({
url: 'uploader',
file: file,
userId: $scope.user._id
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data.id;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
file.upload.progress(function (evt) {
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
});
console.log($scope.uploadedFiles);
}
$scope.removeUploadedFile = function(files, idx) {
files.splice(idx, 1);
console.log($scope.uploadedFiles);
$scope.uploadedFiles = files;
console.log($scope.uploadedFiles);
}
.form-group
.btn.btn-default.btn-file
i.fa.fa-paperclip
| Attach Files
input(type='file', ngf-select='upload($files)',accept="text/plain, image/*", ng-model="files", ngf-multiple="true", ngf-max-size='10000000', ngf-keep="true", ngf-keep-distinct="true")
p.help-block Max. 1MB
br
ul#files(ng-repeat="f in files", style='list-style-type: none; padding:0; margin:0;')
li
div
{{f.name}}
.pull-right
{{f.size | bytes}} #[i.fa.fa-close(ng-click="removeUploadedFile(files, $index)")]
div.progress(ng-show="f.progress >= 0")
div(style="width:{{f.progress}}%", ng-bind="f.progress + '%'")
我正在使用ng-file-upload用于处理文件上传。一切工作正常,只是我无法访问 Controller 中的文件。
这是我的 Controller 代码:
$scope.upload = function(files) {
uploadedFiles = files;
console.log($scope.files);
angular.forEach(files, function(file) {
if (file && !file.$error) {
file.upload = Upload.upload({
url: 'uploader',
file: file,
userId: $scope.user._id
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data.id;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
file.upload.progress(function (evt) {
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
});
console.log(uploadedFiles);
}
$scope.removeUploadedFile = function(files, idx) {
console.log(files);
files.splice(idx, 1);
uploadedFiles = files;
}
还有我的 html 代码:
.form-group
.btn.btn-default.btn-file
i.fa.fa-paperclip
| Attach Files
input(type='file', name='attachment', ngf-select='upload($files)',accept="text/plain, image/*", ng-model="files", ngf-multiple="true", ngf-max-size='10000000', ngf-keep="true", ngf-keep-distinct="true")
p.help-block Max. 1MB
br
//- ul(ng-repeat='file in uploadedFiles', style='list-style-type: none; padding:0; margin:0;')
ul#files(ng-repeat='f in files', style='list-style-type: none; padding:0; margin:0;')
li
div
{{f.name}}
.pull-right
{{f.size | bytes}} #[i.fa.fa-close(ng-click="removeUploadedFile(files, $index)")]
div.progress(ng-show="f.progress >= 0")
div(style="width:{{f.progress}}%", ng-bind="f.progress + '%'")
如果我打印$scope.files
,它什么也不打印。
任何我做错的地方的指示将不胜感激。
更新:
为什么我需要访问 $scope.files
?文件上传功能工作正常,但我需要将上传的文件 ID 传递到我的后端系统,以便将该 ID 保存在我的数据库中。现在要做到这一点,我需要一些包含更新的文件列表的 $scope
变量。由于我允许用户删除上传的文件,因此我需要使用最新的有效上传文件列表更新一些 $scope
变量。如果仍然不清楚,请告诉我。
最佳答案
ngf-keep 存在一些问题,已在版本 7.0.12 中修复。 您原来的帖子现在应该可以使用,或者您可以按照以下步骤操作:https://jsfiddle.net/danialfarid/e7x1xs4a/
<button ngf-select="uploadFiles($files)" ngf-keep="true" multiple>Select Files</button>
$scope.uploadFiles = function(files) {
$scope.files = files;
console.log(files);
angular.forEach(files, function(file) {
if (file && !file.$error) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
file: file
});
file.upload.then(function (response) {"success"
}, function (response) {"error"});
file.upload.progress(function (evt) {"progress"});
}
});
}
关于javascript - 无法访问 Controller 中上传的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32190072/