Question

我想创建一个＆＃39; attach＆＃39;按钮在gmail中，当点击它时，将打开一个浏览窗口，根据用户的选择，http请求将被发送到服务器。

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

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

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

我不希望提交按钮将文件发送到服务器，我希望它在何时被触发该文件由用户选择。
表单默认操作行为是将用户发送到其他页面

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

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。

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

Answer 2

以下是我在项目中使用的代码可能对您有帮助。

HTML：

<form role="form" name="myForm" ng-submit="submitCuisine()" novalidate>
            <div class="form-group">
               <label for="description">Image</label> 
               <input type="file"  file-input="files" name="file"/>
            </div>  
            <button class="btn btn-primary" type="submit"> Submit</button>
        </form>

JS：

$scope.submitCuisine=function(){

        var fd=new FormData();
        angular.forEach($scope.files,function(file){
            fd.append('file',file);
        })
        $http.post('admin/managecuisineAdd',fd,{
            transformRequest:angular.identity,
            headers:{'Content-type':undefined}
        }).success(function(data){
            $scope.message="Successfully"
        });

}

指令：

myApp.directive("fileInput",['$parse',function($parse){
    return{
        restrict:'A',
        link:function(scope,ele,attrs){
            ele.bind('change',function(){
                $parse(attrs.fileInput).
                assign(scope,ele[0].files)
                scope.$apply()
            });
        }
    }
}]);

Angular - 选择文件时上传文件（本机实现）

2 个答案: