Fișier de Încărcare, folosind AngularJS

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.

Comentarii la întrebare (2)
Soluția

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.

Comentarii (8)

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"/>
Add

Î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.

Comentarii (17)

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) https://jsfiddle.net/vince123/8d18tsey/31/

Comentarii (8)

Mai jos este de lucru exemplu de fișier de încărcare:

http://jsfiddle.net/vishalvasani/4hqVu/

Î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

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

Comentarii (7)

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

https://github.com/flowjs/fusty-flow.js

Comentarii (1)

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];
};
Comentarii (2)

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:

  • Progresul
  • Multifiles
  • Domenii
  • Browserele vechi (IE8-9)

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.

Comentarii (1)

De `<input type=file> element nu în mod implicit lucra cu ng-model directive. Este nevoie de o custom directive:

Demo de lucru de return-fișierele Directiva care Funcționează cung-model`1

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>

    <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>

$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ă &#39;Content-Type&#39;: nedefinit. De XHR trimite metoda apoi va detecta [Fișier obiect][Fișier] și setează automat tipul de conținut.

Comentarii (0)

HTML







     <input type = "file" file-model="files" multiple/>
     upload me
     <li ng-repeat="file in files">{{file.name}}</li>

Script-uri

  <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>
Comentarii (1)

Ușor cu un directiva

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
Comentarii (0)

cred că acest lucru este angular file upload:

ng-file-incarca

Ușor JS Unghiulare directivă pentru a încărca fișiere.

Aici este DEMO pagina.Caracteristici

  • Suporta upload progress, revocare/anulare a încărca în timp ce în curs de desfășurare, Fișiere drag and drop (html5), Director drag and drop (webkit), CORS, PUNE(html5)/POST metode de validare de tip de fișier și dimensiunea, arată previzualizare de imagini selectate/audio/video.
  • Browser-ul cruce fișier de încărcare și FileReader (HTML5 și non-HTML5) cu Flash polyfill FileAPI. Permite validare partea de client/modificare înainte de a încărca fișierul
  • Încărcare directă la db servicii CouchDB, imgur, etc... cu fișier's tip de conținut folosind Incarca.http(). Acest lucru permite progresul eveniment pentru unghiulare http POST/PUNE cereri.
  • Separat shim fișier, FileAPI fișierele sunt încărcate la cerere pentru non-cod HTML5 sensul nu de încărcare suplimentar/cod dacă aveți nevoie doar de suport HTML5.
  • Ușor folosind regulat $http pentru a incarca (cu shim pentru non-HTML5 browsere), astfel încât toate unghiulare $http caracteristici sunt disponibile

https://github.com/danialfarid/ng-file-upload

Comentarii (0)

Fișierul dvs. și date json încărcarea în același timp .

// 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 SOLUTION
Comentarii (0)

Puteți utiliza o FormData obiect care este în condiții de siguranță și rapid:

// 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);
    });
}
Comentarii (3)

[http://jsfiddle.net/vishalvasani/4hqVu/](http://jsfiddle.net/vishalvasani/4hqVu/) funcționează bine în chrome și IE (dacă actualizați CSS puțin în background-image). Acest lucru este folosit pentru actualizarea bara de progres:

 scope.progress = Math.round(evt.loaded * 100 / evt.total)

dar în FireFox unghiular's [la suta] date nu este actualizată în DOM cu succes,deși fișierele sunt încărcați cu succes.

Comentarii (7)

Știu că aceasta este o intrare târziu, dar am creat o încărcare simplă directivă. Pe care le puteți obține de lucru în cel mai scurt timp!

<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />

ng-simplu-upload mai mult pe Github cu un exemplu folosind API-ul Web.

Comentarii (0)

Puteți lua în considerare IaaS pentru upload de fișiere, cum ar fi Uploadcare. Există o Unghiular pachet pentru ea: https://github.com/uploadcare/angular-uploadcare

Din punct de vedere tehnic it's implementată ca o directivă, care oferă diferite opțiuni pentru a încărca, și manipulări pentru imaginile încărcate în widget:

Mai multe opțiuni de configurare pentru a juca cu: https://uploadcare.com/widget/configure/

Comentarii (0)

HTML

<input type="file" id="file" name='file' onchange="angular.element(this).scope().profileimage(this)" />

adăugați 'profileimage()' metoda la controler

    $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);
    }
Comentarii (0)

Acest lucru ar trebui să fie o actualizare/comentariu la @jquery-guru's-a raspuns dar ca eu nu't au suficient de reprezentant se va merge aici. Se remediază erorile care sunt acum generate de cod.

https://jsfiddle.net/vzhrqotw/

Schimbarea este de fapt:

FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {

A:

app.controller('FileUploadCtrl', function($scope)
{

Simțiți-vă liber pentru a trece la o locație mai potrivită, dacă se dorește.

Comentarii (0)

Am'am citit tot thread și HTML5 API soluție părea mai bun. Dar îmi schimbă fișiere binare, coruperea acestora într-o manieră m-am'nu am investigat. Soluția care a lucrat perfect pentru mine a fost :

HTML :

<input type="file" id="msds" ng-model="msds" name="msds"/>

    Upload

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);
}

Partea de Server (PHP):

$file_content = $_POST['file'];
$file_content = substr($file_content,
    strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);
Comentarii (0)

Sunt capabil de a încărca fișiere folosind AngularJS prin utilizarea de cod de mai jos:

La "dosar" pentru argumentul că trebuie să fi trecut pentru funcția de ngUploadFileUpload "este" $domeniul de aplicare.fișier ca pe o întrebare.

Punctul cheie aici este de a utiliza transformRequest: []. Acest lucru va preveni $http joace cu conținutul fișierului.

       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;

        }
Comentarii (0)