Wie zum hochladen einer Datei mithilfe von AngularJs wie die traditionelle Art und Weise

Ich habe versucht, diese für Tage. Angenommen ich habe eine form die wie folgt aufgebaut sind:

    <form ng-submit="create()" class="form-horizontal" enctype="multipart/form-data">
      <div class="control-group">
        <label class="control-label">name : </label>
        <div class="controls">
          <input type="text" class="input-xlarge" ng-model="message.title" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">avatar : </label>
        <div class="controls">
          <input type="file" ng-model="message.avatar" name="message[avatar]" />
        </div>
      </div>
      <div class="well">
        <input class="btn btn-large btn-primary" type="submit" value="建立資料" />
      </div>
    </form>

Ich bin mit dem carrierwave gem verarbeiten der Datei-upload hinter der Szene. Meine Steuerung ist so:

 $scope.create = function($scope.message){
   var deferred = $q.defer();
   $http({
       method: 'POST',
       url: '/resources/messages',
       data: $.param({message: message}),
       headers: {'Content-Type': 'multipart/form-data'}
   }).
     success(function(data, status, headers, config){
       deferred.resolve(data);
     }).
     error(function(data, status, headers, config){
       deferred.reject(status);
     });
   return deferred.promise;
  };

Aber es funktioniert nicht. Was ich vorhabe zu tun ist, erstellen Sie ein Formular und laden Sie alles, was wie der alte Weg, aber die Beispiele, die ich gefunden, wie ng-upload, oder wie dieser Beitrag, oder jquery-file-upload, Sie nicht meinen Bedürfnissen angepasst. Gibt es irgendein Beispiel oder Beispiel-code für diesen Zweck? Danke.

Hier ist ein Turnschuh, die Griffe tun einige Datei-upload in eckig mit xhr, wenn dies ist nicht, was Sie suchen, könnten Sie mehr details über das, was Sie wollen, seit dem, was Sie gefunden haben, ist es nicht: jsfiddle.net/danielzen/utp7j

InformationsquelleAutor Chuyi Huang | 2013-07-13

  1. 5

    Denke ich, "wie die alte Art und Weise" wäre es nicht Ajax verwenden, aber ich vermute, dass ist nicht das, was du meinst. 🙂

    @shaunhusain die Geige ist ein gutes Beispiel dafür, wie die FormData-Objekt zum behandeln der file-upload. Und mit diese Website als Referenz verwenden, können Sie die transformRequest zu übernehmen FormData-Objekt.

    Halten Sie Ihre basic - $http code ändern Sie Sie, und fügen Sie das transform-Objekt:

    $scope.create = function(message){
var deferred = $q.defer();
$http({
   method: 'POST',
   url: '/resources/messages',
   data: message //your original form data,
   transformRequest: formDataObject  //this sends your data to the formDataObject provider that we are defining below.
   headers: {'Content-Type': 'multipart/form-data'}
}).
 success(function(data, status, headers, config){
   deferred.resolve(data);
 }).
 error(function(data, status, headers, config){
   deferred.reject(status);
 });
return deferred.promise;
};

    Erstellen eine Fabrik, integrieren, manipulieren die Daten des Formulars in eine verschickbar Nutzlast. Es iteriert durch Ihre form-Daten (einschließlich der hochgeladenen Datei) und geben Sie einen Absender-freundlich-Objekt:

    app.factory('formDataObject', function() {
    return function(data) {
        var fd = new FormData();
        angular.forEach(data, function(value, key) {
            fd.append(key, value);
        });
        return fd;
    };
});

    Ich noch nicht getestet, aber es sollte funktionieren out of the box.

    Ich musste Content-Type zu undefined. Ansonsten die Grenze war nicht immer festgelegt durch den browser.
    FormData nicht von IE9 unterstützt. Gibt es eine Möglichkeit, um dieses?

    InformationsquelleAutor rGil

Schreibe einen Kommentar