怎么使用angular提交form表单里的文件？

Question

好像没有办法绑定数据……可是直接用form提交的话会直接跳转，没办法做输入验证也没办法获取后端的返回值。

前端菜鸟望解答……

html

<form ng-submit="processForm()" enctype="multipart/form-data">
    <div class="form-group">
        <label class="label"><span class="tip" ng-hide="data.id">*</span>ID：</label>
        <input class="input" name="id" ng-model="data.id" maxlength="5">
    </div>
    <div class="form-group">
        <input type="file" name="preview" ng-model="data.preview">
    </div>
    <button type="submit" class="btn btn-default btn-small">保存</button>
</form>

js

$scope.processForm = function(){
        var data = $scope.data,
            url = Api.add,
            config;
        $http({
            method: 'POST',
            url: url,
            data: data,
            headers: {'Content-Type': undefined},
         }).then(function(result){

Answer 1

找到解决方法了
http://blog.csdn.net/wei38908...
https://github.com/ghostbar/a...

html

<form enctype="multipart/form-data">
    <div class="form-group">
        <label class="label"><span class="tip" ng-hide="data.id">*</span>ID：</label>
        <input class="input" name="id" ng-model="data.id" maxlength="5">
    </div>
    <div class="form-group">
        <input type="file" name="preview" file-model='fileModel'>
    </div>
    <button type="submit" class="btn btn-default btn-small" ng-click="save()">保存</button>
</form>

弃用了题目里的directive，改用上面链接里的angular-file-model(文档写得挺详细的……)

(function () {
  'use strict';

  angular.module('file-model', [])

  .directive('fileModel', [
    '$parse',
    function ($parse) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          var model = $parse(attrs.fileModel);
          var modelSetter = model.assign;

          element.bind('change', function(){
            scope.$apply(function(){
              if (attrs.multiple) {
                modelSetter(scope, element[0].files);
              }
              else {
                modelSetter(scope, element[0].files[0]);
              }
            });
          });
        }
      };
    }
  ]);

})();

保存的方法：

$scope.save = function(){
        var data = new FormData(),
            file = document.querySelector('input[type=file]').files[0],
            url = Api.add,
            config;
            data.append('preview', file);
            data.append('id', $scope.data.id);
            $http({
                    method: 'POST',
                    url: url,
                    data: data,
                    headers: {'Content-Type': undefined},
                    transformRequest: angular.identity//感觉这一行好像是关键……有大神解释一下吗
                }).then(function(result){

但是没看懂解决方法里的代码……感觉自己照抄来的也很粗糙……抛砖引玉吧……

Answer 2

return false；阻止form表单的默认行为，先验证再提交

Answer 3

直接改造你的$scope.processForm函数，先校验，在提交.
`

  $scope.data={};
    //校验参数有效性
    $scope.validParam = function(){
        //TODO 验证
        if($scope.data.id ==1){
            return true;
        }
        return false;
    };
    
    $scope.processForm = function(){
        var isValid = $scope.validParam();
        if(isValid){
            //TODO post
            console.log("post the data to server.....");
        }
        return;
    };

`