用AngularJs上傳文件/圖片

我想用AngularJs上傳文件（所以圖片）...我讀AngularJs不支持tag input type =「file」，所以我讀了我需要的自定義指令...我想取輸入文件，並將其用於顯示預覽（縮略圖）在同一個頁面的html和控制器上傳的文件在服務器上...在我的網頁HTML我寫了這個代碼：用AngularJs上傳文件/圖片

<body ng-controller="myController"> 

<h1>Select file</h1> 
<input type="file" file-model="myFile" /> 
<div> 
    <h2>File content is:</h2> 
    <pre>{{ content }}</pre> 
</div> 

</body>

我寫了這個指令：

var modulo = angular.module('myApp', []); 


modulo.directive('fileModel', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.on('change', function (event) { 
       var file = event.target.files[0]; 
       scope.$emit("fileSelected", file); 
      });    
     } 
    }; 
});

這是我的控制器：

modulo.controller('myController', function ($scope) { 

    $scope.$on('fileSelected', function (event, args) { 
     $scope.content(args.file); 
     console.log(args.file); 
    }); 
});

此代碼不起作用...是否有解決方案？錯誤在哪裏？

來源

2015-04-22 Ragnarr

來自您發佈的代碼，它似乎缺少一個ng-app聲明 - 將ng-app放在body標籤上，如下所示： – oliveromahony

I在這裏省略充足，因爲它服務 – Ragnarr

你應該做的顯示圖像下面：

<pre><img data-ng-src="data:image/png;base64,{{ content }}"/></pre>

和從輸入檢索數據，你應該使用諸如this answer顯示自定義指令：

angular.module('appFilereader', []).directive('appFilereader', function($q) 
{ 
    var slice = Array.prototype.slice; 
    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      if (!ngModel) return; 

      ngModel.$render = function() {}; 

      element.bind('change', function(e) { 
       var element = e.target; 

       $q.all(slice.call(element.files, 0).map(readFile)) 
        .then(function(values) { 
         if (element.multiple) ngModel.$setViewValue(values); 
         else ngModel.$setViewValue(values.length ? values[0] : null); 
        }); 

       function readFile(file) { 
        var deferred = $q.defer(); 

        var reader = new FileReader(); 
        reader.onload = function(e) { 
         deferred.resolve(e.target.result); 
        }; 
        reader.onerror = function(e) { 
         deferred.reject(e); 
        }; 
        reader.readAsDataURL(file); 

        return deferred.promise; 
    } 

); //change

而且在你的html中：

<input type="file" ng-model="editItem._attachments_uri.image" 
accept="image/*" app-filereader />

來源

2015-04-22 09:52:01 Michael

對不起，但這段代碼是全部在指令？ – Ragnarr

對不起，你能幫我一下我的代碼嗎？因爲它必須運行...如果我以這種方式將警報定位在警報（文件）;我獲得[object File]，因此我可以讀取文件，並且可以讀取名稱，大小和上次修改的內容。當我通過範圍傳遞文件。$ emit（「fileSelected」，file）;我在我的控制器中使用這個值...如果我嘗試在我的頁面html中顯示文件，並在我的控制檯中顯示我的控制檯「undefined」....爲什麼？謝謝！ – Ragnarr

錯誤在你的指令

檢查這一點，我已經使用了相同的指令，在我的應用程序

.directive('fileModel', ['$parse', function ($parse) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
    var model = $parse(attrs.fileModel); 
    var modelSetter = model.assign; 

    element.bind('change', function(){ 
     scope.$apply(function(){ 
     modelSetter(scope, element[0].files[0]); 
     }); 
    }); 
    } 
}; 
} 
this is my html to 
input(type="file", file-model="myFile", accept="image/*", image="image", id='fileInput')

這是我創建了用於處理上載

function fileUpload (file, uploadUrl) { 

var cropedImage = dataURItoBlob(file); 
var fileData = new FormData(), 
    uploadedImage = ''; 
fileData.append('fileUpload', cropedImage); 

return $http({ 
    withCredentials: true, 
    method: "POST", 
    url: uploadUrl,  
    data: fileData, 
    headers: {'Content-Type': undefined}, 
    transformRequest: angular.identity 
});  

}

試試這個小服務，它的工作對我來說

來源

2015-04-22 09:57:11

抱歉，您能評論該代碼嗎？另外如何將文件/ imge從指令傳遞到控制器以顯示圖像預覽？謝謝！ – Ragnarr

@ user3751473我已經使用以下命令將文件/圖像從指令傳遞到我的控制器函數 angular.element（document.querySelector（'＃fileInput'））。on（'change'，handleFileSelect）;我的控制器 var handleFileSelect = function（selectedFile）{0} var file = selectedFile.currentTarget.files [0]; var reader = new FileReader（）; reader.onload = function（selectedFile）{ $ scope。$ apply（function（$ scope）{ $ scope.myImage = selectedFile.target.result; }）; }; reader.readAsDataURL（file）; }; –

用AngularJs上傳文件/圖片

回答

相關問題