Angular js输入类型文件 - 清除先前选择的文件答案

【问题标题】：Angular js Input type file - clear previously selected fileAngular js输入类型文件 - 清除先前选择的文件
【发布时间】：2015-07-27 18:50:15
【问题描述】：

我正在使用 input type="file" 进行使用 Angular js 的上传控制。每次单击浏览时，我都不想看到以前选择的文件。默认情况下，这似乎被保留。可以通过写指令来实现吗？每次点击浏览都能触发吗？

我正在使用引导实现来用更好的方式替换默认浏览按钮。

 <span class="useBootstrap btn btn-default btn-file">
                Browse <input type="file"  />
            </span>

【问题讨论】：

看看这是否有帮助stackoverflow.com/questions/15079779/…

标签： angularjs twitter-bootstrap angularjs-directive input-type-file angular-file-upload

【解决方案1】：

这是最简单的方法，无需使用任何指令或复杂代码。

Browse <input type="file" ng-click="clear()"

在你的控制器中

 $scope.clear = function () {
    angular.element("input[type='file']").val(null);
};

【讨论】：

是的，这确实是一种最简单的方法……但这不是正确的方法。我已经经历了以指令的形式再次重写整个代码的麻烦，这就是为什么我不能推荐这种方法。
这抱怨它不能将 jqLite 用于选择器。但这很好用： var myEl = angular.element( document.querySelector( '#some-id' ) );
如果您想要一个单独的Clear 或Cancel 按钮，请将id= 添加到元素中。例如。 id="fileSelector_1" and then angular.element(document.querySelector('#fileSelector_1')).val(null);`这对我有用。我用它来清除Save 和Cancel 按钮，

【解决方案2】：

here is alternate way to clear input file type. 
HTML ->>
`<span class="useBootstrap btn btn-default btn-file">
   Browse <input type="file" ng-if="clearBtn" />
</span>`

Js ->>

`//initial loading
$scope.clearBtn = true;
// after submit / on reset function
$scope.submitform = function(){
//submit logic goes here;
//onsuccess function
$scope.clearBtn = false;
  $timeout(function(){
    $scope.clearBtn = true;
  });
}`

【讨论】：

【解决方案3】：

如果我们使用fileUpload指令，那么我们可以直接从HTML中清除上传的文件数据。

e:g-

指令-

app.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 () {
          modelSetter(scope, element[0].files[0])
        })
  })
}

} }])

html代码-上传文件输入框

<button ng-disabled="!myFile" class="btn btn-primary btn-rounded btn-ef btn-        
ef-5 btn-ef-5a mb-10 "
ng-click="uploadFile(myFile);myFile=''">Upload button
</button>

<button class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5a mb-10 "
ng-click="myFile=''">Clear
</button>

调用http服务

  var fd = new FormData()
   fd.append('file', file) //File is from uploadFile(myFile)

   $http.post(url, fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined,
          'sessionId': sessionId,
          'project': userProject
        }
      })

【讨论】：

【解决方案4】：

你可以很容易地做到这一点，这里有一个例子：

   <input type="file" accept="image/jpeg" id="fileInp" required file-input="files" >

//在我的代码中，其余的发生在从服务器发送响应时

  $http.post('upload.php', form_data,
       {

            transformRequest: angular.identity,
            headers: {'Content-Type': undefined,'Process-Data': false}
       }).success(function(response){
        $scope.response_msg=response;
           if($scope.response_msg=="File Uploaded Successfully")
           {
            $scope.IsVisibleSuccess = $scope.IsVisibleSuccess = true;
           }
           else
           {
            $scope.IsVisibleFailed=$scope.IsVisibleFailed=true;
           }


                  $scope.img_name='';


                 $("input[type='file']").val('');

       });

【讨论】：