Comment faire pour télécharger un fichier en utilisant AngularJs comme la manière traditionnelle

J'ai essayé pendant des jours. En supposant que j'ai un formulaire comme suit:

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

Je suis en utilisant le carrierwave gem pour gérer l'upload de fichier derrière la scène. Mon contrôleur est comme ceci:

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

Cependant, il n'est pas de travail. Ce que j'ai l'intention de le faire est de créer un formulaire et envoyer tout comme l'ancienne, mais les exemples que j'ai trouvé comme ng-téléchargement ou comme ce post, ou jquery file upload, ils ne conviennent pas à mon besoin. Est-il un exemple ou un exemple de code pour cela? Je vous remercie.

  • Ici, un violon qui gère faire quelques upload de fichier dans angulaire à l'aide xhr si ce n'est pas ce que vous êtes à la recherche pour vous pourrait vous fournir plus de détails sur ce que vous voulez car ce que vous avez trouvé n'est-il pas: jsfiddle.net/danielzen/utp7j
InformationsquelleAutor Chuyi Huang | 2013-07-13
  1. 5

    Je pense "comme à l'ancienne" serait de ne pas utiliser Ajax, mais je suppose que c'est pas ce que tu veux dire. 🙂

    @shaunhusain le violon est un bon exemple de la façon d'utiliser le Objet FormData pour gérer l'upload de fichier. Et à l'aide de ce site comme référence, vous pouvez utiliser le transformRequest d'incorporer l'objet FormData.

    Garder votre base $http code, de le modifier, ajouter la transformation de l'objet:

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

    Créer une usine qui va intégrer de manipuler les données du formulaire dans une charge utile pouvant être envoyées. Il va parcourir votre formulaire de données (y compris le fichier téléchargé) et le retour de l'expéditeur-friendly objet:

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

    Je n'ai pas testé, mais il devrait fonctionner hors de la boîte.

    • J'ai dû mettre Content-Type à undefined. Sinon, la limite n'est pas définie par le navigateur.
    • FormData n'est pas pris en charge par IE9. Est-il un moyen de contourner cela?
    InformationsquelleAutor rGil