我是angularjs的新手,我正在尝试克隆div并获取克隆div的数据,我成功克隆了div但我发现很难从克隆的div获取数据(文件)帮助我排序出来。
HTML
<div class="form-group last">
<div ng-repeat="input in inputs track by $index" class="col-md-3">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden" value="" name="">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="img/catalog-no-image.png" alt="">
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 10px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileupload-new btn-sm"><i class="fa fa-paper-clip"></i> Select image</span>
<span class="fileupload-exists btn-sm"><i class="fa fa-undo"></i> Change</span>
<input type="file" class="default" name="image_file" file-model="myFile" custom-on-change="loadFileData($file)" multiple="true">
</span>
<button class="btn btn-danger btn-sm fileupload-exists" id="removeImage" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</button>
</div>
</div>
</div>
<div class="col-md-12">
<span class="label label-danger">NOTE!</span>
<span>
Attached image thumbnail is
supported in Latest Firefox, Chrome, Opera,
Safari and Internet Explorer 10 only
</span>
</div>
</div>
<div class="col-md-12">
<button class="btn btn-success" type="button" id="add" ng-click="add()">Add</button>
</div>
app.js
.controller('productUploadCtrl', ['$scope', 'fileUpload', '$routeParams', '$http', '$compile', 'toastr', function($scope, fileUpload, $routeParams, $http, $compile, toastr) {
$('#group_selection').select2();
$scope.uploadFile = function(clear, pattern) {
$scope.myFile = [];
$scope.loadFileData = function(files) {
console.log(files);
console.log($scope.fileModel);
$scope.files = files;
};
var file = $scope.myFile;
console.log(file);
//alert(file);
var id_product = $routeParams.productId;
var uploadUrl = "cataloglog-ajax.php";
fileUpload.uploadFileToUrl(file, uploadUrl, id_product, clear, $scope, pattern);
};
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'image-duplicate'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
app.directive('customOnChange', function($parse) {
return {
restrict: 'A',
scope: false,
link: function(scope, element, attrs) {
var fn = $parse(attrs.onReadFile);
element.on('change', function(onChangeEvent) {
var reader = new FileReader();
reader.onload = function(onLoadEvent) {
scope.$apply(function() {
fn(scope, {$fileContent:onLoadEvent.target.result});
});
};
reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
//Get the Uploaded file mime type
mimeType=(onChangeEvent.srcElement || onChangeEvent.target).files[0].type;
fileName=(onChangeEvent.srcElement || onChangeEvent.target).files[0].name;
});
}
};
})
答案 0 :(得分:0)
看看这个答案 Upload multiple files in angular和此处的掠夺者http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview
为了实现目标,你唯一需要改变的是移动
var values = [];
在bind函数之外,所以它将是
var values = [];
element.bind('change', function () {
否则你将无法一个接一个地选择文件,只能以多种方式,一次几个。