Question

我正在尝试预览从多个输入类型文件中选择的图像。为此，我想要文件路径列表并使用这些路径，我将预览图像。

但是我在ng-src标记中使用了img，并且ng-src上设置了这些路径，并且我希望根据使用{{1的文件选择创建img标记}}

假设我将在ng-repeat上选择5个文件，然后创建5个input type=file标记。假设我将文件从5更改为2，然后删除所有5个img标记并创建2个img标记。

我不知道img是否是根据文件选择创建ng-repeat代码的正确选项？

下面是我的myfileupload指令

img

这是mys服务

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;

    });

}
};
});

我如何创建输入类型文件的控制器

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;
})

文件元素是在调用add函数后动态创建的，当我设置myservice.setFilePath时，它会在newFile.val中给出错误!!!

Answer 1

好的，我没有时间重写代码，但这里有几点需要注意：

1）在您的服务中，我不认为filepath曾被定义过，这可能是您收到错误的原因所在。

2）我不认为这种语法会起作用：
filepath[name][index]
也许你打算使用点符号，如下所示： filepath.name[index]

3）在你的控制器中，你有一个没有关闭的字符串，这导致控制器中的其余代码被解释为一个字符串。

4）取代控制器中的所有HTML字符串，检查角度数据绑定功能。您应该能够在模板中创建所有这些HTML元素，并使用angular指令或数据绑定来使templat动态化。例如：

<div>
    <label id='desccodeL{{currentg1}}'for='desccodeL{{currentg1}}'>
        Code {{currentg1}}
    </label>
</div>

使用Angularjs查看由多个输入类型文件选择的文件

1 个答案: