AngularJS:如何实现多部分表单的简单文件上传?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (53)

我想做一个简单的多部分表单发布,从AngularJS到node.js服务器,表单应该包含一个JSON对象在一个部分,另一个部分包含一个图像(我目前只发布带有$Resource的JSON对象)

我想我应该从输入type=“file”开始,但是后来发现AngularJS不能绑定到它。

我可以找到的所有示例都是用于包装用于拖放的jQuery插件。我想要一个简单的上传一个文件。

我是AngularJS的新手,我对编写自己的指令感到很不舒服。

提问于
用户回答回答于

HTML

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

Angularjs(1.0.6)不支持吴模型在“输入-文件”标签上,所以必须以“本机方式”来传递用户选择的所有文件(最终)。

控制器

$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!... );

};
用户回答回答于

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>
//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);
  }); 

}];

扫码关注云+社区