我想这样做从AngularJS一个简单的多形式张贴到node.js的服务器，表格应包含在其他部分一个部分一个JSON对象和图像，（我目前只发布与$资源的JSON对象）

我想我应该输入类型=“文件”开始，但后来发现，AngularJS不能绑定到..

所有我能找到的例子是包木窗的jQuery插件的拖放。我想一个文件的一个简单的上传。

我是新来AngularJS和感觉不舒服，在所有写我自己的指令。

Answer 1:

没有其他依赖数量比angularjs一个真正有效的解决方案（与1.0.6版测试）

HTML

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs（1.0.6）不支持NG-模型上“输入文件”标签，所以你必须这样做，在从用户传递的所有（最终）选择文件“天然方法”。

调节器

$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

凉爽的部分是未定义的内容类型和transformRequest：angular.identity，让在$ HTTP来选择合适的“内涵式”管理和处理多数据时所需的边界的能力。

Answer 2:

您可以使用简单/轻量级NG-文件上传指令。它支持拖放，文件进度和文件上传非HTML5的浏览器与FileAPI闪光灯垫片

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS：

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
  Upload.upload({
    url: 'my/upload/url',
    file: $files,            
  }).progress(function(e) {
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  }); 

}];

Answer 3:

这是更有效，直接发送文件。

的base64编码的Content-Type: multipart/form-data增加了额外的33％的开销。如果服务器支持的话，它是更有效的将文件直接发送：

$scope.upload = function(url, file) {
    var config = { headers: { 'Content-Type': undefined },
                   transformResponse: angular.identity
                 };
    return $http.post(url, file, config);
};

当发送了一个POST 文件对象，它设置是非常重要的'Content-Type': undefined 。该XHR发送方法然后将检测到的文件对象和自动设置的内容类型。

要发送多个文件，看到做多$http.post从文件列表直接请求

我想我应该输入类型=“文件”开始，但后来发现，AngularJS不能绑定到..

所述<input type=file>元件由与默认工作不NG-模型指令。它需要一个自定义的指令：

“选择-A-文件”指令的工作演示与工程`ng-model` ¹

 angular.module("app",[]); angular.module("app").directive("selectNgFiles", function() { return { require: "ngModel", link: function postLink(scope,elem,attrs,ngModel) { elem.on("change", function(e) { var files = elem[0].files; ngModel.$setViewValue(files); }) } } });

 <script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app"> <h1>AngularJS Input `type=file` Demo</h1> <input type="file" select-ng-files ng-model="fileArray" multiple> <h2>Files</h2> <div ng-repeat="file in fileArray"> {{file.name}} </div> </body>

`$http.post`与内容类型`multipart/form-data`

如果一个人必须发送multipart/form-data ：

<form role="form" enctype="multipart/form-data" name="myForm">
    <input type="text"  ng-model="fdata.UserName">
    <input type="text"  ng-model="fdata.FirstName">
    <input type="file"  select-ng-files ng-model="filesArray" multiple>
    <button type="submit" ng-click="upload()">save</button>
</form>

$scope.upload = function() {
    var fd = new FormData();
    fd.append("data", angular.toJson($scope.fdata));
    for (i=0; i<$scope.filesArray.length; i++) {
        fd.append("file"+i, $scope.filesArray[i]);
    };

    var config = { headers: {'Content-Type': undefined},
                   transformRequest: angular.identity
                 }
    return $http.post(url, fd, config);
};

当发送与一个POST FORMDATA API ，它设置是非常重要的'Content-Type': undefined 。该XHR发送方法然后将检测FormData对象，并自动将内容类型设置头的multipart / form-data的与适当的边界。

Answer 4:

我只是有这个问题。因此，有几个方法。首先是新的浏览器都支持

var formData = new FormData();

按照此链接到有关信息一个博客的支持是如何限制在现代浏览器，但否则它完全解决了这个问题。

否则，你可以将表单张贴到使用目标属性的iframe。当您发布的形式，一定要目标设置与设置为none，其显示性能的iframe。我们的目标是iframe的名称。（只要你知道。）

我希望这有帮助

Answer 5:

我知道这是一个迟到的条目，但我已经创建了一个简单的上传指令。你可以得到在任何时间工作！

<input type="file" multiple ng-simple-upload web-api-url="/api/post"
       callback-fn="myCallback" />

NG-简单上传使用Web API的例子更Github上。

Answer 6:

我只写了一个简单的指令（从现有的ofcourse）在AngularJs一个简单的上传。

（确切的jQuery上传插件是https://github.com/blueimp/jQuery-File-Upload ）

一个简单的上传使用AngularJs（CORS与实施）

（虽然在服务器端是PHP，你可以简单的改变它节点也）

Answer 7:

你可以通过上传$resource的分配数据资源PARAMS属性actions就像这样：

$scope.uploadFile = function(files) {
    var fdata = new FormData();
    fdata.append("file", files[0]);

    $resource('api/post/:id', { id: "@id" }, {
        postWithFile: {
            method: "POST",
            data: fdata,
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        }
    }).postWithFile(fdata).$promise.then(function(response){
         //successful 
    },function(error){
        //error
    });
};