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

Question

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

但在这里我img标签使用ng-src，这些路径上ng-src设置和我也想根据使用ng-repeat文件选择创建img标签。

假设我将在input type=file上选择5个文件，然后创建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.va中的错误我！

Answer 1

好吧，我没有时间重写代码，但这里有一些东西来看看：

1）在你的服务，我不认为filepath是不断定义，这可能就是你'收到错误。

2）我不认为这句法将工作：
filepath[name][index]
也许你打算用点符号，就像这样： filepath.name[index]

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

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

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