Comment télécharger un fichier avec AngularJS?
j'essaie de télécharger un fichier avec AngularJS. C'est mon code:
HTML
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>
JavaScript
$scope.uploadFile = function(){
var file = $scope.myFile;
var uploadUrl = "http://admin.localhost/images/patanjali/";
VariantService.uploadFileToUrl(file, uploadUrl);
};
VariantService.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
alert ('success');
})
.error(function(){
});
}
bien que je puisse voir l'alerte ('success') dans mon service, le fichier n'est pas sauvegardé dans l'emplacement fourni dans controller.
quelqu'un Peut-il m'aider? Ce qui est absent?
4 réponses
On dirait que vous êtes à l'aide de code de ce jfiddle pour votre application:
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
bien que correctement configuré, ceci est seulement pour l'affichage des données du côté du client; le serveur doit également être configuré pour accepter/enregistrer les données. La façon dont vous faites cela dépend de votre pile de technologies d'arrière-plan.
j'ai eu le même problème. J'ai essayé de suivre le code et mon problème a été résolu.
var req = {
method: 'POST',
url: url,
headers: {
'Content-Type': "application/json",
},
data: data,
transformRequest: function(data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function(value, key) {
formData.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return formData;
}
}
$http(req)
.success(function(response) {
$scope.Models = response;
})
.error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
alert(data);
});
$scope.setFiles = function (element) {
$scope.$apply(function (scope) {
$scope.files = [];
for (var i = 0; i < element.files.length; i++) {
scope.files.push(element.files[i])
}
});
};
$scope.uploadFile = function() {
var fd = new FormData();
for (var i in $scope.files) {
fd.append('file', $scope.files[i])
}
$http.post('http://admin.localhost/images/patanjali', fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
.then(function successCallback(response) {
}, function errorCallback(response) {
});
};<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js'></script>
<input type="file" valid-file ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)" />
<button ng-click="uploadFile()">Upload me</button>vous pouvez utiliser les modules AngularJs pour l'uploader de fichiers.Les modules sont très utiles et très confortable.