web-dev-qa-db-ja.com

Angular js入力タイプファイル-以前に選択したファイルをクリア

angular jsを使用したアップロードコントロールにinput type="file"を使用しています。参照をクリックするたびに、以前に選択したファイルを表示したくありません。デフォルトでは、これは保持されているようです。ディレクティブを作成することで実現できますか？参照をクリックするたびにトリガーできますか？

bootstrap実装を使用して、デフォルトの参照ボタンをより良いものに置き換えています。

 <span class="useBootstrap btn btn-default btn-file">
                Browse <input type="file"  />
            </span>
angularjstwitter-bootstrapangularjs-directiveinput-type-fileangular-file-upload
8
KeenUser

これは、ディレクティブや複雑なコードを使用せずに、最も簡単な方法でした。

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

そしてあなたのコントローラーで

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

FileUploadディレクティブを使用すると、アップロードされたファイルデータをHTMLから直接クリアできます。

例えば-

ディレクティブ-

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
        }
      })
0
Rohit Parte

あなたはそれを非常に簡単に行うことができます、ここに例があります：

   <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('');

       });
0
Ayan Bhattacharjee
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;
  });
}`
0
user2156672