Dateien angular hochladen

Question

In meinem $ scope.accept versuche ich, einige Dateien auf meinen Server zu laden, das Skript funktioniert, wenn ich gerade <form id="mForm" action="http://.php" method="post" enctype="multipart/form-data"> in meinem HTML mache.

Aber ich möchte die Weiterleitung stoppen, also möchte ich es mit Ajax auf meinem Controller tun. Wenn ich das gleiche Skript in der Steuerungsseite laufen bekomme ich diesen Fehler: Typeerror: kann Eigenschaft ‚Länge‘ undefinierter bei subir lesen ..... An dieser Linie besonders: var i = 0, len = filedata.files.length, img, Leser, fil;

function subir() { 
    alert("ok"); 
var filedata = document.getElementsByName("file"), 
     formdata = false; 
if (document.FormData) { 
    formdata = new FormData(); 
} 
var i = 0, len = filedata.files.length, img, reader, file; 

for (; i < len; i++) { 
    file = filedata.files[i]; 

    if (document.FileReader) { 
     reader = new FileReader(); 
     reader.onloadend = function(e) { 
      showUploadedItem(e.target.result, file.fileName); 
     }; 
     reader.readAsDataURL(file); 
    } 
    if (formdata) { 
     formdata.append("file", file); 
    } 
} 

if (formdata) { 
    $.ajax({ 
     url: "http:.php", 
     type: "POST", 
     dataType:'json', 
     data: {json: formdata}, 
     processData: false, 
     contentType: false, 
     success: function(res) {      
       alert("success"); 
     },  
     error: function(res) { 
       alert("error"); 
     }  
     }); 
     } 
    }; 

Dies ist Teil des HTML:

  <input type="file" accept="image/*;capture=camera" onchange="openFile_1(event)" id="file_1" class="custom-file-input" name="file[]"> 
    <img id="srcImage1" height="0">          
    </span> 
     <span class="item item-input">     
    <input type="text" id="obs_1" placeholder="Observaciones" style="text-align:left;"/>  
    </span> 
     <span class="item item-input"> 
    <input type="file" accept="image/*;capture=camera" onchange="openFile_2(event)" id="file_2" class="custom-file-input" name="file[]"> 

Answer 1

Diese Zeile im Code eine Reihe von gibt alle die Dateien, die hochgeladen wurden, auch wenn es nur eine Datei ist:

var filedata = document.getElementsByName("file") 

Außerdem, wenn Sie versuchen, die Eigenschaft zuzugreifen files von filedata, es gibt undefined zurück weil die files Eigenschaft nur von einem einzelnen Element in diesem Array erhalten werden kann.

es zu beheben, versuchen Sie diese Zeile zu ändern:

var i = 0, len = filedata.files.length, img, reader, file; 

Um dies:

var i = 0, len = filedata[0].files.length, img, reader, file; 

Zusätzlich müssen Sie diese Zeile ändern:

Um dies zu

file = filedata.files[i]; 

:

file = filedata[0].files[i]; 

Oder, wenn mehrere Dateien eingereicht werden könnten, könnten Sie sogar eine for Schleife hinzufügen, die durch jede Datei in filedata iteriert.

Answer 2

Sie haben erwähnt, dass Sie AngularJS verwenden.

Hier ist eine Lösung, die Sie versuchen können, mit ist AngularJS

<input id="fileupload" type="file" name="files" file-model="myFile"> 

Hier file-model Richtlinie

.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 
     } 
    }; 
}]); 

Hier, wie Sie Ihren Controller Code sieht aus wie

$scope.myFile = null; 

Sie Datei Details erhalten/Datei in myFile Variable, aber es ist ein Array, so während Sie passieren es zu bedienen, sollten Sie separaten Service schreiben wie

folgenden

this.uploadFile = function(file) { 
      var fd = new FormData(); 
      fd.append('file', file[0]); 
// file[0] if you're passing myFile directly from controller otherwise you can pass myFile[0] from there and pass just file here 
      var d = $q.defer(); 
      $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: { 
        'Content-Type': undefined 
       } 
       }) 
       .success(function(response) { 
       d.resolve(response); 
       }) 
       .error(function(response) { 
       d.reject(response); 
       }); 
      return d.promise; 
     }; 

EDIT:

In Ihrer Lösung versuchen diese

var filedata = document.getElementsByName("file"), 
    formdata = false; 
    if (document.FormData) { 
     formdata = new FormData(); 
    } 
var i = 0, len = filedata.length, img, reader, file; 

Ihre filedata alle Dateien mit, so dass Sie nicht brauchen, zu tun .files