Я пытаюсь просмотреть изображения, выбранные из файла типа ввода с несколькими. Для этого я хочу список путей к файлам и используя эти пути, я предварительно просмотрю изображения.
Но здесь я использовал ng-src
в теге img
, и эти пути установлены на ng-src
а также я хочу создать img
тег в соответствии с выбором файла с помощью ng-repeat
.
Предположим, что я выберу 5 файлов на input type=file
затем создадим 5 img
тег. Предположим, я меняю файлы с 5 на 2, затем все 5 тегов img
удаляются и создаются 2 img
тега.
Я не знаю, подходит ли ng-repeat
для создания тега img
соответствии с выбором файла или нет?
ниже это моя директива myfileupload
App.directive('myFileUpload', function (fileService) {
return {link: function (scope, element, attrs) {
element.bind('change', function () {
var index;
var index_file = 0;
for (index = 0; index < element[0].files.length; index++) {
var file=element[0].files[index];
fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
index_file++;
var src={};
/*src["src"]=element[0].files[index];*/
fileService.setFilePath(element[0].files[index], index_file, attrs.myFileUpload);
console.log(pathss);
path.push(src);
}
index_file = 0;
});
}
};
});
это служба mys
App.service('fileService', function () {
var fileService = {};
fileService.getFile = function (name) {
return file[name];
};
fileService.setFile = function (newFile, index, name) {
if (index === 0 && file[name] === undefined)
/*file[name] = [];*/
console.log(file);
file[name][index] = newFile;
/*console.log(name);*/
};
fileService.getFilePath = function (name) {
return filepath[name];
};
fileService.setFilePath = function (newFile, index, name) {
if (index === 0 && file[name] === undefined)
/*file[name] = [];*/
console.log(file);
filepath[name][index] = newFile.val;
/*console.log(name);*/
};
return fileService;
})
контроллер для того, как я создаю файл типа ввода
$scope.add=function(){
var name="descimg["+currentg1+"]";
var pathname="imgfile["+currentg1+"]";
file[name] = [];
var $div = angular.element("<div><label id='desccodeL["+currentg1+"]' for='desccodeL["+currentg1+"]''>Code "+currentg1+"</label><textarea rows='3' cols='6' id='desccode["+currentg1+"]' name='desccode["+currentg1+"]' ng-model='blog.desccode["+currentg1+"]''></textarea></div><div><label id='descimgL["+currentg1+"]' for='descimgL["+currentg1+"]'>Image "+currentg1+"</label><input type='file' id='descimg["+currentg1+"]' class='file' name='descimg["+currentg1+"]' my-file-upload='descimg["+currentg1+"]' multiple/></div>");
var e=document.getElementById("outerdiv");
var $div2=angular.element("<div ng repeat='path in "+fileService.getFilePath("descimg["+currentg1+"]"); +"'><img ng-src=''/></div></div >);
var e2=document.getElementById("displayblog");
angular.element(e).append($div).injector().invoke(function($compile) {
var scope = angular.element($div).scope();
$compile($div)(scope);
});
angular.element(e2).append($div2).injector().invoke(function($compile) {
var scope = angular.element($div2).scope();
$compile($div2)(scope);
});
currentg1++;
};
элемент файла создается динамически после вызова функции add, а также, когда я устанавливаю myservice.setFilePath, выдает ошибку в newFile.val !!!
Хорошо, у меня нет времени переписать код, но вот несколько вещей, на которые нужно смотреть:
1) В вашем сервисе я не думаю, что filepath
определен и, вероятно, почему вы получаете ошибку.
2) Я не думаю, что этот синтаксис будет работать: filepath[name][index]
Возможно, вы намеревались использовать точечную нотацию, например: filepath.name[index]
3) В вашем контроллере у вас есть строка, которая не закрыта, что приводит к интерпретации остальной части кода в контроллере как строки.
4) Вместо всех этих строк HTML в контроллере проверьте возможности привязки угловых данных. Вы должны иметь возможность создавать все эти элементы HTML в своем шаблоне и использовать угловые директивы или привязку данных, чтобы сделать динамику templat. Например:
<div>
<label id='desccodeL{{currentg1}}'for='desccodeL{{currentg1}}'>
Code {{currentg1}}
</label>
</div>