查看輸入類型文件與多個使用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>