使用AngularJS重置文件输入

我已经经历了很多教程，仍然无法理解如何正确处理这种情况。请看看并帮我解决这个问题。使用AngularJS重置文件输入

我提交了一个json文件上传的表单。然后，我想在点击“提交”按钮后立即重置文件输入字段。

clearData（）方法发送请求以从数据库中删除数据，而我只想清除文件输入字段。

这里是我的表格的布局：

<form id="json-upload-form" name="jsonUploadForm" enctype="multipart/form-data"> 
    <div class="row"> 
     <div class="col-md-12 json-upload-file"> 
     <div class="fileinput fileinput-new" data-provides="fileinput"> 
      <span class="choose-file-label">Select JSON file</span> 
      <span class="btn btn-default btn-file uui-button"> 
      <span class="fileinput-new">Choose file</span> 
      <span class="fileinput-exists">Change file</span> 
      <input type="file" name="files" file-model="json.file"/> 
      </span> 
      <span class="fileinput-filename" ng-model="filename"></span> 
      <a href="#" class="close fileinput-exists" data-dismiss="fileinput">×</a> 
     </div> 
     <button class="uui-button green" id="json-upload-button" ng-click="submit()">Upload file</button> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     <button type="button" class="uui-button green" id="json-clear-button" ng-click="clearData()">Clear data</button> 
     </div> 
    </div> 
</form>

在这里，我有一个指令，寻找到一个文件中的值：

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

       element.bind('change', function() { 
        model.assign(scope, element[0].files[0]); 
        scope.$apply(); 
       }); 
      } 
     } 
    }]);

这里谈到的是职位数据服务：

angular.module('adminSmokeReportsApp') 
.service('multipartForm', [ 
    '$http', 
    function ($http) { 
     this.post = function (uploadUrl, data) { 
      var formData = new FormData(); 
      formData.append("files", data.file); 

      $http.post(uploadUrl, formData, { 
       transformRequest: angular.identity, 
       headers: { 
        'Content-Type': undefined 
       } 
      }); 
     } 
    }]);

最后处理动作的控制器：

angular.module('adminSmokeReportsApp') 
.controller('JsonUploadCtrl', [ 
    '$scope', 
    'config', 
    'multipartForm', 
    function ($scope, config, multipartForm) { 
     $scope.clearData = function() { 
      $.ajax({ 
       url: config.clearTestDataUrl, 
       success: function() { 
        alert("All data cleared!"); 
       } 
      }); 
     }; 

     $scope.json = {}; 

     $scope.submit = function() { 
      var uploadUrl = config.jsonUploadFormUrl; 
      multipartForm.post(uploadUrl, $scope.json); 
     }; 
    }]);

我试过一种方法，我们保存初始状态，然后使用angular.copy进行更改。最终，myForm。$ setPristine（）似乎没有办法。

我也想调用元素上的val（）将其设置为null。没有成功。尽管如果我在指令中使用该函数，但它在执行上传方法之前发生了这种情况，它仍然可以工作。你可以看到，我是一个新手，我可能有解决方案，但不知道正确的应用方式。谢谢！

来源

2017-08-06 Stanislav Ovsyankin