Téléchargement de fichier en utilisant AngularJS
Voici mon formulaire HTML:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Je souhaite télécharger une image à partir d'un ordinateur local et lire le contenu du fichier téléchargé. Tout ce que je veux faire avec AngularJS.
Lorsque j'essaie d'imprimer la valeur de $scope.file, elle est indéfinie.
Certaines des réponses suggèrent d'utiliser FormData(), mais il s'agit malheureusement d'un objet de navigateur non disponible dans Internet Explorer 9 et inférieur. Si vous devez prendre en charge ces navigateurs plus anciens, vous aurez besoin d’une stratégie de sauvegarde telle que l’utilisation de <iframe> ou de Flash.
Il existe déjà de nombreux modules Angular.js pour effectuer le téléchargement de fichiers. Ces deux ont un support explicite pour les anciens navigateurs:
- https://github.com/leon/angular-upload - utilise les iframes comme solution de secours
- https://github.com/danialfarid/ng-file-upload - utilise FileAPI/Flash comme solution de secours
Et quelques autres options:
- https://github.com/nervgh/angular-file-upload/
- https://github.com/uor/angular-file
- https://github.com/twilson63/ngUpload
- https://github.com/uploadcare/angular-uploadcare
L'un d'entre eux devrait correspondre à votre projet ou vous donner une idée de la manière de le coder vous-même.
Le plus simple est d’utiliser l’API HTML5, à savoir FileReader
HTML est assez simple:
<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>
Dans votre contrôleur, définissez la méthode 'add':
$scope.add = function() {
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
//send your binary data via $http or $resource or do anything else with it
}
r.readAsBinaryString(f);
}
Compatibilité du navigateur
Navigateurs de bureau
Firefox (Gecko) 3.6 (1.9.2), Chrome 7, Internet Explorer * 10, Opera * 12.02, Safari 6.0.2
Navigateurs mobiles
Firefox (Gecko) 32, Chrome 3, Internet Explorer * 10, Opera * 11.5, Safari 6.1
Remarque: La méthode readAsBinaryString () est obsolète et readAsArrayBuffer () doit être utilisé à la place.
C'est la méthode de navigation moderne, sans bibliothèques tierces. Fonctionne sur tous les derniers navigateurs.
app.directive('myDirective', function (httpPostFactory) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attr) {
element.bind('change', function () {
var formData = new FormData();
formData.append('file', element[0].files[0]);
httpPostFactory('upload_image.php', formData, function (callback) {
// recieve image name to use in a ng-src
console.log(callback);
});
});
}
};
});
app.factory('httpPostFactory', function ($http) {
return function (file, data, callback) {
$http({
url: file,
method: "POST",
data: data,
headers: {'Content-Type': undefined}
}).success(function (response) {
callback(response);
});
};
});
HTML:
<input data-my-Directive type="file" name="file">
PHP:
if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
// uploads image in the folder images
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);
// give callback to your angular code with the image src name
echo json_encode($newfilename);
}
js fiddle (seulement front-end) https://jsfiddle.net/vince123/8d18tsey/31/
Vous trouverez ci-dessous un exemple pratique de téléchargement de fichier:
http://jsfiddle.net/vishalvasani/4hqVu/
Dans cette fonction appelée
setFiles
Depuis la vue qui mettra à jour le tableau de fichiers dans le contrôleur
ou
Vous pouvez vérifier le téléchargement de fichier jQuery en utilisant AngularJS
Vous pouvez télécharger des fichiers et des dossiers Nice à l’aide de flow.js .
https://github.com/flowjs/ng-flow
Découvrez une démo ici
http://flowjs.github.io/ng-flow/
Il ne supporte pas IE7, IE8, IE9, vous devrez donc éventuellement utiliser un calque de compatibilité.
Utilisez l'événement onchange pour transmettre l'élément de fichier d'entrée à votre fonction.
<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />
Ainsi, lorsqu'un utilisateur sélectionne un fichier, vous avez une référence à celui-ci sans que l'utilisateur ait besoin de cliquer sur un bouton "Ajouter" ou "Télécharger".
$scope.fileSelected = function (element) {
var myFileSelected = element.files[0];
};
J'ai essayé toutes les alternatives proposées par @Anoyz (bonne réponse) ... et la meilleure solution est https://github.com/danialfarid/angular-file-upload
Certaines fonctionnalités:
- Le progrès
- Multifiles
- Des champs
- Vieux navigateurs (IE8-9)
Cela fonctionne bien pour moi. Vous devez juste faire attention aux instructions.
Du côté serveur, j'utilise NodeJs, le middleware Express 4 et Multer pour gérer les requêtes en plusieurs parties.
HTML
<html>
<head></head>
<body ng-app = "myApp">
<form ng-controller = "myCtrl">
<input type = "file" file-model="files" multiple/>
<button ng-click = "uploadFile()">upload me</button>
<li ng-repeat="file in files">{{file.name}}</li>
</form>
Les scripts
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('myApp', []).directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('change', function(){
$parse(attrs.fileModel).assign(scope,element[0].files)
scope.$apply();
});
}
};
}]).controller('myCtrl', ['$scope', '$http', function($scope, $http){
$scope.uploadFile=function(){
var fd=new FormData();
console.log($scope.files);
angular.forEach($scope.files,function(file){
fd.append('file',file);
});
$http.post('http://localhost:1337/mediaobject/upload',fd,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(d)
{
console.log(d);
})
}
}]);
</script>
L'élément <input type=file> ne fonctionne pas par défaut avec la directive ng-model . Il faut un directive personnalisée :
Démonstration de travail de return-files Directive fonctionnant avec ng-model1
angular.module("app",[]);
angular.module("app").directive("selectNgFiles", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" select-ng-files ng-model="fileList" multiple>
<h2>Files</h2>
<div ng-repeat="file in fileList">
{{file.name}}
</div>
</body>$http.post à partir d'un FileList
$scope.upload = function(url, fileList) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
var promises = fileList.map(function(file) {
return $http.post(url, file, config);
});
return $q.all(promises);
};
Lors de l'envoi d'un POST avec un objet File , il est important de définir 'Content-Type': undefined. Le méthode d'envoi XHR détectera alors le objet Fichier et définira automatiquement le type de contenu.
Facile avec une directive
Html:
<input type="file" file-upload multiple/>
JS:
app.directive('fileUpload', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0;i<files.length;i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};
Dans la directive, nous nous assurons qu'une nouvelle portée est créée, puis écoutons les modifications apportées à l'élément d'entrée du fichier. Lorsque des modifications sont détectées avec émettre un événement à toutes les étendues d'ancêtres (vers le haut) avec l'objet fichier en tant que paramètre.
Dans votre contrôleur:
$scope.files = [];
//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
$scope.$apply(function () {
//add the file object to the scope's files collection
$scope.files.Push(args.file);
});
});
Ensuite, dans votre appel ajax:
data: { model: $scope.model, files: $scope.files }
http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/
je pense que ceci est le angular upload de fichier:
ng-file-upload
Lightweight Angular JS directive pour télécharger des fichiers.
Voici le DEMO page.Features
- Prend en charge la progression du téléchargement, annule/annule le téléchargement en cours, glisser-déposer de fichier (html5), glisser-déposer de répertoire (webkit), méthodes CORS, PUT (html5)/POST, validation du type et de la taille du fichier, afficher l'aperçu des images sélectionnées/audio/vidéos.
- Transfert de fichiers entre navigateurs et FileReader (HTML5 et non HTML5) avec Flash polyfill FileAPI. Permet la validation/modification côté client avant de télécharger le fichier
- Téléchargement direct vers les services de base de données CouchDB, imgur, etc ... avec le type de contenu du fichier à l'aide de Upload.http (). Cela active l'événement progress pour les demandes angular http POST/PUT.
- Fichier shim séparé, les fichiers FileAPI sont chargés à la demande pour du code non-HTML5, ce qui signifie qu'aucune charge/code supplémentaire n'est nécessaire si vous avez juste besoin de la prise en charge de HTML5.
- Léger avec $ http habituel à télécharger (avec shim pour les navigateurs non HTML5) afin que toutes les fonctionnalités de angular $ http soient disponibles
Votre fichier et vos données json sont téléchargés en même temps.
// FIRST SOLUTION
var _post = function (file, jsonData) {
$http({
url: your url,
method: "POST",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
formData.append("file", data.files);
return formData;
},
data: { model: jsonData, files: file }
}).then(function (response) {
;
});
}
// END OF FIRST SOLUTION
// SECOND SOLUTION
// İf you can add plural file and İf above code give an error.
// You can try following code
var _post = function (file, jsonData) {
$http({
url: your url,
method: "POST",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
for (var i = 0; i < data.files.length; i++) {
// add each file to
// the form data and iteratively name them
formData.append("file" + i, data.files[i]);
}
return formData;
},
data: { model: jsonData, files: file }
}).then(function (response) {
;
});
}
// END OF SECOND SOLUTIONVous pouvez utiliser un objet FormData qui soit sûr et rapide:
// Store the file object when input field is changed
$scope.contentChanged = function(event){
if (!event.files.length)
return null;
$scope.content = new FormData();
$scope.content.append('fileUpload', event.files[0]);
$scope.$apply();
}
// Upload the file over HTTP
$scope.upload = function(){
$http({
method: 'POST',
url: '/remote/url',
headers: {'Content-Type': undefined },
data: $scope.content,
}).success(function(response) {
// Uploading complete
console.log('Request finished', response);
});
}
Je sais que c'est une entrée tardive, mais j'ai créé une directive de téléchargement simple. Que vous pouvez travailler en un rien de temps!
<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />
ng-simple-upload plus sur Github avec un exemple utilisant Web API.
http://jsfiddle.net/vishalvasani/4hqVu/ fonctionne très bien dans chrome et IE (si vous mettez à jour CSS un peu dans l'image d'arrière-plan). Ceci est utilisé pour mettre à jour la barre de progression:
scope.progress = Math.round(evt.loaded * 100 / evt.total)
mais dans [FireFox] angular [pour cent], les données ne sont pas mises à jour correctement dans DOM, bien que les fichiers soient correctement téléchargés.
Vous pouvez envisager IaaS pour le téléchargement de fichiers, tel que ploadcare . Il existe un package Angular pour cela: https://github.com/uploadcare/angular-uploadcare
Techniquement, il est implémenté sous forme de directive, offrant différentes options pour le téléchargement et des manipulations pour les images téléchargées dans le widget:
<uploadcare-widget
ng-model="object.image.info.uuid"
data-public-key="YOURKEYHERE"
data-locale="en"
data-tabs="file url"
data-images-only="true"
data-path-value="true"
data-preview-step="true"
data-clearable="true"
data-multiple="false"
data-crop="400:200"
on-upload-complete="onUCUploadComplete(info)"
on-widget-ready="onUCWidgetReady(widget)"
value="{{ object.image.info.cdnUrl }}"
/>
Plus d’options de configuration pour jouer avec: https://uploadcare.com/widget/configure/
HTML
<input type="file" id="file" name='file' onchange="angular.element(this).scope().profileimage(this)" />
ajoute la méthode 'profileimage ()' à votre contrôleur
$scope.profileimage = function(selectimage) {
console.log(selectimage.files[0]);
var selectfile=selectimage.files[0];
r = new FileReader();
r.onloadend = function (e) {
debugger;
var data = e.target.result;
}
r.readAsBinaryString(selectfile);
}
J'ai lu tout le fil et la solution de l'API HTML5 semblait être la meilleure. Mais cela modifie mes fichiers binaires, les corrompant d’une manière que je n’ai pas étudiée. La solution qui a parfaitement fonctionné pour moi était la suivante:
HTML:
<input type="file" id="msds" ng-model="msds" name="msds"/>
<button ng-click="msds_update()">
Upload
</button>
JS:
msds_update = function() {
var f = document.getElementById('msds').files[0],
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
console.log(data);
var fd = new FormData();
fd.append('file', data);
fd.append('file_name', f.name);
$http.post('server_handler.php', fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log('success');
})
.error(function(){
console.log('error');
});
};
r.readAsDataURL(f);
}
Côté serveur (PHP):
$file_content = $_POST['file'];
$file_content = substr($file_content,
strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);
Cela devrait être une mise à jour/un commentaire de la réponse de @ jquery-guru mais comme je n’ai pas assez de représentants, cela ira ici. Il corrige les erreurs qui sont maintenant générées par le code.
https://jsfiddle.net/vzhrqotw/
Le changement est fondamentalement:
FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {
À:
app.controller('FileUploadCtrl', function($scope)
{
N'hésitez pas à vous déplacer si vous le souhaitez.
Je suis capable de télécharger des fichiers en utilisant AngularJS en utilisant le code ci-dessous:
La file de l'argument devant être passé pour la fonction ngUploadFileUpload est $scope.file selon votre question.
Le point clé ici est d’utiliser transformRequest: []. Cela empêchera $ http de jouer avec le contenu du fichier.
function getFileBuffer(file) {
var deferred = new $q.defer();
var reader = new FileReader();
reader.onloadend = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise;
}
function ngUploadFileUpload(endPointUrl, file) {
var deferred = new $q.defer();
getFileBuffer(file).then(function (arrayBuffer) {
$http({
method: 'POST',
url: endPointUrl,
headers: {
"accept": "application/json;odata=verbose",
'X-RequestDigest': spContext.securityValidation,
"content-length": arrayBuffer.byteLength
},
data: arrayBuffer,
transformRequest: []
}).then(function (data) {
deferred.resolve(data);
}, function (error) {
deferred.reject(error);
console.error("Error", error)
});
}, function (error) {
console.error("Error", error)
});
return deferred.promise;
}
La réponse acceptée ci-dessus n’est pas compatible avec le navigateur. Si quelqu'un a un problème de compatibilité, essayez ceci.
Voir le code
<div ng-controller="MyCtrl">
<input type="file" id="file" name="file"/>
<br>
<button ng-click="add()">Add</button>
<p>{{data}}</p>
</div>
Code du contrôleur
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.data = 'none';
$scope.add = function(){
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e){
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++)
{
binary += String.fromCharCode(bytes[i]);
}
$scope.data = (binary).toString();
alert($scope.data);
}
r.readAsArrayBuffer(f);
}
}
Nous avons utilisé HTML, CSS et AngularJS. L'exemple suivant montre comment télécharger le fichier en utilisant AngularJS.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app = "myApp">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.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]);
});
});
}
};
}]);
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(){
});
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>
</body>
</html>
en mots simples
en HTML - ajouter le code ci-dessous uniquement
<form name="upload" class="form" data-ng-submit="addFile()">
<input type="file" name="file" multiple
onchange="angular.element(this).scope().uploadedFile(this)" />
<button type="submit">Upload </button>
</form>
dans le contrôleur - Cette fonction est appelée lorsque vous cliquez sur "bouton de téléchargement du fichier". il va télécharger le fichier. vous pouvez le consoler.
$scope.uploadedFile = function(element) {
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}
ajouter plus de contrôleurs - code ci-dessous ajouter dans la fonction. Cette fonction est appelée lorsque vous cliquez sur le bouton utilisé "frapper l'api (POST)". il enverra le fichier (qui a été téléchargé) et les données de formulaire au backend.
var url = httpURL + "/reporttojson"
var files=$scope.files;
for ( var i = 0; i < files.length; i++)
{
var fd = new FormData();
angular.forEach(files,function(file){
fd.append('file',file);
});
var data ={
msg : message,
sub : sub,
sendMail: sendMail,
selectUsersAcknowledge:false
};
fd.append("data", JSON.stringify(data));
$http.post(url, fd, {
withCredentials : false,
headers : {
'Content-Type' : undefined
},
transformRequest : angular.identity
}).success(function(data)
{
toastr.success("Notification sent successfully","",{timeOut: 2000});
$scope.removereport()
$timeout(function() {
location.reload();
}, 1000);
}).error(function(data)
{
toastr.success("Error in Sending Notification","",{timeOut: 2000});
$scope.removereport()
});
}
dans ce cas .. j'ai ajouté ci-dessous le code en tant que données de formulaire
var data ={
msg : message,
sub : sub,
sendMail: sendMail,
selectUsersAcknowledge:false
};
Exemple de travail utilisant une directive simple ( ng-file-model ):
.directive("ngFileModel", [function () {
return {
$scope: {
ngFileModel: "="
},
link: function ($scope:any, element, attributes) {
element.bind("change", function (changeEvent:any) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
$scope.$apply(function () {
$scope.ngFileModel = {
lastModified: changeEvent.target.files[0].lastModified,
lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
name: changeEvent.target.files[0].name,
size: changeEvent.target.files[0].size,
type: changeEvent.target.files[0].type,
data: changeEvent.target.files[0]
};
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}])
et utilisez FormData pour télécharger le fichier dans votre fonction.
var formData = new FormData();
formData.append("document", $scope.ngFileModel.data)
formData.append("user_id", $scope.userId)
tous les crédits vont pour https://github.com/mistralworks/ng-file-model
J'ai fait face à un petit problème, vous pouvez le vérifier ici: https://github.com/mistralworks/ng-file-model/issues/7
Enfin, voici un repo forké: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js
TÉLÉCHARGER DES FICHIERS
<input type="file" name="resume" onchange="angular.element(this).scope().uploadResume()" ng-model="fileupload" id="resume" />
$scope.uploadResume = function () {
var f = document.getElementById('resume').files[0];
$scope.selectedResumeName = f.name;
$scope.selectedResumeType = f.type;
r = new FileReader();
r.onloadend = function (e) {
$scope.data = e.target.result;
}
r.readAsDataURL(f);
};
TELECHARGER DES FICHIERS:
<a href="{{applicant.resume}}" download> download resume</a>
var app = angular.module("myApp", []);
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
cela marche
fichier.html
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
</body>
<script src="controller.js"></script>
</html>
controller.js
var app = angular.module('app', []);
app.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(res){
console.log(res);
}).error(function(error){
console.log(error);
});
}
}]);
app.controller('fileCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload.php"; // upload url stands for api endpoint to handle upload to directory
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>
fileupload.php
<?php
$ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$image = time().'.'.$ext;
move_uploaded_file($_FILES["file"]["tmp_name"],__DIR__. ' \\'.$image);
?>
Le code aidera à insérer le fichier
<body ng-app = "myApp">
<form ng-controller="insert_Ctrl" method="post" action="" name="myForm" enctype="multipart/form-data" novalidate>
<div>
<p><input type="file" ng-model="myFile" class="form-control" onchange="angular.element(this).scope().uploadedFile(this)">
<span style="color:red" ng-show="(myForm.myFile.$error.required&&myForm.myFile.$touched)">Select Picture</span>
</p>
</div>
<div>
<input type="button" name="submit" ng-click="uploadFile()" class="btn-primary" ng-disabled="myForm.myFile.$invalid" value="insert">
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="insert.js"></script>
</body>
insert.js
var app = angular.module('myApp',[]);
app.service('uploadFile', ['$http','$window', function ($http,$window) {
this.uploadFiletoServer = function(file,uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data){
alert("insert successfull");
$window.location.href = ' ';//your window location
})
.error(function(){
alert("Error");
});
}
}]);
app.controller('insert_Ctrl', ['$scope', 'uploadFile', function($scope, uploadFile){
$scope.uploadFile = function() {
$scope.myFile = $scope.files[0];
var file = $scope.myFile;
var url = "save_data.php";
uploadFile.uploadFiletoServer(file,url);
};
$scope.uploadedFile = function(element) {
var reader = new FileReader();
reader.onload = function(event) {
$scope.$apply(function($scope) {
$scope.files = element.files;
$scope.src = event.target.result
});
}
reader.readAsDataURL(element.files[0]);
}
}]);
save_data.php
<?php
require "dbconnection.php";
$ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$image = time().'.'.$ext;
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$image);
$query="insert into test_table values ('null','$image')";
mysqli_query($con,$query);
?>
<form id="csv_file_form" ng-submit="submit_import_csv()" method="POST" enctype="multipart/form-data">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Dans le contrôleur angularJS
$scope.submit_import_csv = function(){
var formData = new FormData(document.getElementById("csv_file_form"));
console.log(formData);
$.ajax({
url: "import",
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(result, textStatus, jqXHR)
{
console.log(result);
}
});
return false;
}