Aici este meu de formular HTML:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Vreau să încărcați o imagine din computer și doriți să citiți conținutul fișierului încărcat. Toate astea vreau să fac folosind AngularJS.
Când m-am încercați să imprimați valoare de $domeniul de aplicare.fișier
e de nedefinit.
Unele dintre răspunsurile de aici propun folosirea FormData()
, dar, din păcate, că este un browser obiect nu este disponibil în Internet Explorer 9 și mai jos. Dacă aveți nevoie pentru a sprijini cele mai vechi browsere, veți avea nevoie de o strategie de backup, cum ar fi utilizarea <iframe>
sau Flash.
Există deja multe Angular.js module pentru a efectua fișier încărcarea. Aceste două au un sprijin explicit pentru browsere mai vechi:
Și alte câteva opțiuni:
Unul dintre acestea ar trebui să se potrivi proiectul dumneavoastră, sau poate da o idee despre cum să cod singur.
Cel mai simplu este de a folosi HTML5 API, și anume [FileReader
][1]
HTML este destul de simplă:
<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>
În controlerul defini 'adăugați' metoda:
$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);
}
Compatibilitate Browser-Ul
Browserele Desktop
Firefox(Gecko) 3.6(1.9.2), Chrome 7, Internet Explorer 10, Opera 12.02, Safari 6.0.2
Browsere Mobile
Firefox(Gecko) 32, Crom 3, Internet Explorer 10, Opera 11.5, Safari 6.1
Notă : readAsBinaryString() metodă este învechită și readAsArrayBuffer() ar trebui să fie folosit în loc.
Acest lucru este browser-ul modern, fără biblioteci 3rd party. Funcționează pe toate cele mai recente browsere.
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:
<?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 vioara (doar front-end)
Mai jos este de lucru exemplu de fișier de încărcare:
În aceasta funcție numită
setFiles
De Vedere, care va actualiza fișierul matrice în controller
sau
Puteți verifica jQuery File Upload folosind AngularJS
Puteți obține frumos fișier și folder incarca folosind flow.js.
https://github.com/flowjs/ng-flow
Check out un demo aici
http://flowjs.github.io/ng-flow/
Nu't suport IE7, IE8, IE9, deci'll în cele din urmă trebuie să utilizați un strat de compatibilitate
Folosi `onchange event pentru a trece la fișierul de intrare element de funcție.
<input type="fișier" onchange="unghiulare.element(acest lucru).domeniul de aplicare().fileSelected(acest lucru)" />
Deci, atunci când un utilizator selectează un fișier, aveți o referință la acesta, fără ca utilizatorul să faceți clic pe o "Adăugați" sau "Încărcați" buton.
$scope.fileSelected = function (element) {
var myFileSelected = element.files[0];
};
Am încercat toate alternativele care @Anoyz (răspunsul Corect) dă... și cea mai bună soluție este https://github.com/danialfarid/angular-file-upload
Unele Caracteristici:
L's de lucru bine pentru mine. Trebuie doar să acorde o atenție la instrucțiuni.
În server-side folosesc NodeJs, Express 4 și Multer middleware pentru a gestiona mai multe cereri.
De `<input type=file> element nu în mod implicit lucra cu ng-model directive. Este nevoie de o custom directive:
return-fișierele Directiva care Funcționează cu
ng-model`1angular.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
la o 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);
};
Când trimiteți un MESAJ cu o [Fișier obiect][Fișier], este important să se stabilească 'Content-Type': nedefinit
. De XHR trimite metoda apoi va detecta [Fișier obiect][Fișier] și setează automat tipul de conținut.
<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>
<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>