如何使用AngularJs像传统的方式上传文件 [英] How to upload a file using AngularJs like the traditional way

问题描述

我已经试过这几天了。假设我有一个像下面的表单：

I've been tried this for days. Assuming I have a form like following:

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

我现在用的是carrierwave宝石，以处理幕后的文件上传。我的控制器是这样的：

I am using the carrierwave gem to handle the file upload behind the scene. My controller is like this:

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

但它不工作。我打算做的就是创建一个表单并上传一切如旧的方式，但我的例子中发现，如NG上传，或者像<一个href=\"http://blog.brunoscopelliti.com/a-directive-to-manage-file-upload-in-an-angularjs-application\">this帖子，或 jQuery的文件上传，他们不适合我的需要。是否有任何例子或样本code用于此目的？谢谢。

However it is not working. What I intend to do is create a form and upload everything like the old way, but the examples I found such as ng-upload, or like this post, or jquery file upload, they don't suit my need. Is there any example or sample code for this purpose? Thank you.

推荐答案

我觉得之类的老办法将不使用Ajax，但我猜这不是你的意思。 ：）

I think "like the old way" would be to not use Ajax, but I'm guessing that's not what you mean. :)

@ shaunhusain的小提琴是如何使用 FORMDATA对象以一个很好的例子处理文件上传。并使用本网站作为一个参考，你可以使用 transformRequest 来纳入FORMDATA对象。

@shaunhusain's fiddle is a good example of how to use the FormData object to handle the file upload. And using this site as a reference, you can use the transformRequest to incorporate the FormData object.

保持基本的 $ HTTP code，修改，增加转换对象：

Keeping your basic $http code, modify it to add the transform object:

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

创建一个工厂，将纳入表单数据处理成可发送的有效载荷。它将通过表单数据（包括上传的文件）迭代并返回发件人友好的对象：

Create a factory that will incorporate manipulate the form data into a sendable payload. It will iterate through your form data (including uploaded file) and return a sender-friendly object:

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

我没有测试过这一点，但它应该工作的开箱。

I haven't tested this, but it should work out of the box.

这篇关于如何使用AngularJs像传统的方式上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！