0
我希望你能幫我解決這個問題。我已經創建了一個與angularJs圖片上傳的功能,我不斷收到錯誤Angularjs中的圖片上傳失敗(getFileDetails不是函數)
Uncaught TypeError: angular.element(...).scope(...).getFileDetails is not a functiononchange @ (index):1
這是我的內部控制器功能 //上傳圖片
$scope.addImage = function(){
var f = document.getElementById('file').files.length;
if(f+$scope.numberOfImages > 5){
$scope.addImageFail = true;
$scope.messageErrorAddPicture =
"Sorry but you selected too many images. " +
"All together with already added images, you can have max 5 images";
$timeout(function(){$scope.addImageFail = false;}, 4000);
}else{
// GET THE FILE INFORMATION.
$scope.getFileDetails = function(e){
$scope.files = [];
$scope.$apply(function(){
// STORE THE FILE OBJECT IN AN ARRAY.
for (var i = 0; i < e.files.length; i++) {
$scope.files.push(e.files[i])
}
});
};
$scope.uploadFiles = function(){
//FILL FormData WITH FILE DETAILS.
var data = new FormData();
for (var i in $scope.files) {
data.append("uploadedFile", $scope.files[i]);
}
$http({
method : 'POST',
url : $location.protocol() + '://' + $location.host() + '/server/api/products/addImagesToProduct',
headers : { 'Content-Type': 'multipart/form-data' },
data : $.param({
id_product : $scope.id,
file : data
})
}).success(function(data){
if(!data.success) {
console.log(data);
$scope.addImageFail = data.addImageFail;
$scope.messageErrorAddPicture = data.messageErrorAddPicture;
$timeout(function(){$scope.addImageFail = false;}, 4000);
}else{
console.log(data);
}
});
//objXhr.addEventListener("progress", updateProgress, false);
}
// UPDATE PROGRESS BAR.
function updateProgress(e) {
if (e.lengthComputable) {
document.getElementById('pro').setAttribute('value', e.loaded);
document.getElementById('pro').setAttribute('max', e.total);
}
}
}
}
這是我的HTML
<form ng-submit="addImage()" enctype='multipart/form-data' novalidate>
<input type="hidden" ng-model="product[0].id_product" name="id" disabled="disabled" />
<input type="file" id="file" name="file" multiple onchange="angular.element(this).scope().getFileDetails(this)" />
<input type="submit" value="Upload" />
</form>
<!--ADD A PROGRESS BAR ELEMENT.-->
<div class="bg_light_color_1 relative r_corners progress_bar wrapper">
<p><progress id="pro" value="0"></progress></p>
<!--<div style="width:40%" class="bg_color_green_2"></div>-->
</div>
所以我有兩個問題:
1.我與圖片上傳做錯了什麼?如何解決我的代碼,使其工作。
2.您將看到註釋行//objXhr.addEventListener("progress」 ...如何這個的addEventListener追加到我的$ HTTP請求,所以我將獲得的圖像上傳狀態
如果您需要任何額外的信息或代碼,請讓我知道,我會提供的。謝謝你在前進。
你爲什麼不使用已經存在的文件上傳的角度模塊?退房https://github.com/danialfarid/ng-file-upload – Lokesh
如果沒有人回答我的問題,那麼我會嘗試你的建議 –