File upload 如何像传统方式一样使用AngularJs上传文件

我已经试了好几天了。假设我有如下表格：

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

但是它不起作用。我打算做的是创建一个表单并像以前那样上传所有内容，但是我发现的示例，如ng upload，或like，或，它们不适合我的需要。是否有用于此目的的示例或示例代码？多谢各位

我认为“像以前一样”应该是不使用Ajax，但我猜这不是你的意思

@shaunhusain的小提琴是一个很好的例子，说明了如何使用来处理文件上传。作为参考，您可以使用

transformRequest

合并FormData对象

保留基本的

$http

代码，修改它以添加转换对象：

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

创建一个工厂，将表单数据合并到可发送的负载中。它将遍历您的表单数据（包括上载的文件），并返回发件人友好的对象：

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

---

我还没有测试过这个，但它应该是开箱即用的。

这里有一个提琴，可以处理使用xhr以角度上传文件的操作，如果这不是你想要的，你能提供更多关于你想要什么的详细信息吗，因为你发现的不是：我必须将

内容类型设置为
未定义的
。否则浏览器无法设置边界。IE9不支持FormData。有办法解决这个问题吗？
app.factory('formDataObject', function() {
    return function(data) {
        var fd = new FormData();
        angular.forEach(data, function(value, key) {
            fd.append(key, value);
        });
        return fd;
    };
});