使用相同的上传器angular上传多个文件
upload multiple files using the same uploader angular
所以我正在努力让这个上传器工作,这就是我目前拥有的
这是我的html
<div class="row" ng-repeat="row in fileUploadRows">
<div ng-if="advanced_user" class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file, $index)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="row.fileName">Uploaded file: {{row.fileName}}
<button type="button" ng-click="deleteInvAttachment(event.filenameinv)" class="btn btn-danger btn-sm">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-click="addInvAttachment($index)" class="btn btn-info btn-sm">
<i class="fa fa-plus"></i>
</button>
<button type="button" ng-click="removeInvAttachment(row)" class="btn btn-danger btn-sm">
remove last attachment
</button>
</div>
这是在我的控制器中
$scope.fileUploadRows = [];
var fileDetails = {
fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter = 1;
$scope.addInvAttachment = function(index) {
var fileDetails = {
fileName: ''
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter++;
}
$scope.removeInvAttachment = function(row) {
$scope.fileUploadRows.splice(row, 1);
}
现在我现在的功能在一定程度上有效,我可以点击加号按钮,它会在html端加载一个空白的上传按钮,以及{{fileUploadRows}}
中的一个空白fileName。现在我的问题是当我尝试上传一个新文件时。它替换旧文件(以及旧字符串等)
这是我的上传
$scope.uploadinv = function (file, index) {
if (file && $scope.advanced_user) {
Upload.upload({
url: '',
data: {file: file}
}).then(function (resp) {
sweetAlert({title: "Attachment Saved", type: "success"});
}, function (resp) {
sweetAlert({title: "Attachment Not Saved", type: "error"});
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
$scope.event.filenameinv = evt.config.data.file.name
});
}
};
那么,如何将每个文件保存到数组中呢?
感谢
I强烈建议您使用ng文件上传:https://github.com/danialfarid/ng-file-upload
非常完整,支持拖放、调整图像大小等等。
看起来你可能正在使用它(我注意到上传服务和ngf-select指令)
如果是,请检查ngf更改,并尝试将文件输入与ng模型绑定,以获得$scope可访问性。
相关文章:
- 使用Angular和Node上传文件
- 使用Angular js-量角器e2e测试上传文件
- Angular JS文件上传到托管服务器
- Angular 2:在本地.json文件上找不到文件
- 使用angular js在前端下载文件
- 使用相同的上传器angular上传多个文件
- Angular文件上传插件:文件选择在Firefox中无法正常工作
- Angular JS文件上传使用Angular文件上传-限制文件类型,大小
- 如何在Angular文件上传模块中更新URL路径
- 当没有使用angular文件上传指令上传的文件时
- Angular文件上传formData
- 如何在glyphicon中使用angular文件上传
- 要求的事情.在angular文件上传节点js中,body为空
- Node . js提供修改过的angular文件的旧版本(而不是新版本)
- angular文件上传未将文件添加到请求中
- Gulpfile错误地将angular文件加载到index.html中
- Angular文件上传- cancelItem方法不起作用
- Nervgh Angular文件上传-我如何限制文件格式说jpeg和png
- CodeIgniter Angular文件夹动态URL路由
- Nervgh Angular文件上传-如何限制要上传的图像数量