javascript - Angular - 选择文件时上传文件( native 实现)

Question

我想创建一个像 gmail 中那样的“附加”按钮，单击它时，将打开一个浏览窗口，并且根据用户选择，将向服务器发送一个 http 请求。

今天我在客户端中使用以下代码:

<form action="/upload" method="post" enctype="multipart/form-data">
                        <input type="file" name="data" />
                        <input type="submit">do it</input>
</form>

由于以下几个原因，这并不好:

1. 我不希望使用提交按钮将文件发送到服务器，我希望在以下情况下触发它:文件由用户选择。
2. 表单默认操作行为是将用户发送到不同的页面

我正在寻找具有相同详细信息(enctype="multipart/form-data" 和文件详细信息)的 http post 请求的实现( native Angular 代码，而不是外部库) )但不使用表单。

Answer 1

我不知道这是否是您提到的native，但我在我的项目中使用了它:

$scope.form = null;
$scope.uploaded = [];

$scope.upload = function(){
  var data = new FormData(document.forms.namedItem('form')); // form name
  $http.post('/upload', data, {                              // change with your endpoint
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
  })
  .success(function(res){
    $scope.uploaded.push(res);
    $scope.form = null;
  });
};

$scope.$watch('form', function(){
  $scope.upload();
});

HTML*:

<div ng-repeat="n in uploaded">
  {{n.filename}}
</div>

<form name="form">
  <input type="file" name="data" ng-model="form" />
</form>

*使用 CSS 隐藏输入文件名以创建类似 Gmail 的上传。确保你的服务器返回了一个文件名或者你需要的东西，我假设你的服务器返回了一个带有键“filename”的文件名，看看上面的$scope.uploaded。

请记住检查您的服务器端，输入文件将与multipart/form-data一起发送，并使用data作为其名称。每次用户添加图像/文件时都会触发此操作，请小心在服务器端处理此类事情。实际上，我更喜欢像往常一样使用submit按钮。