クリアボタンはAngularJsのアップロードで動作しません

私はAngularJsを初めて使用しています。現在、ファイルアップロードスクリプトを作成中です。私はウェブを検索し、いくつかのスクリプトを組み合わせて以下のコードを達成しました。クリアボタンはAngularJsのアップロードで動作しません

私の問題は、クリアボタンがクリック時にファイル名をクリアしてファイルをキューから削除する必要があることです。

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 

</head> 

<body ng-app = "myApp"> 

    <div ng-controller = "myCtrl"> 

    <input type = "file" file-model = "myFile" file-select="file"/> 

    <button ng-click="clear()">clear</button> 
    <button ng-click = "uploadFile()">upload me</button> 
    </div> 

    <script> 
    var app = angular.module('myApp', []); 

    app.controller('myCtrl', ['$scope', 'fileUpload', 'fileSelect', function($scope, fileUpload, fileSelect){ 
     $scope.uploadFile = function(){ 
      var file = $scope.myFile; 

      console.log('file is '); 
      console.dir(file); 

      var uploadUrl = "/fileUpload"; 
      fileUpload.uploadFileToUrl(file, uploadUrl); 
     }; 

      $scope.clear = function() { 
      $scope.file = null; 
      }; 
     }]); 

    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]); 
       }); 
       }); 
      } 

     }; 
    }]); 

    app.directive('fileSelect', function() { 

      return function(scope, elem, attrs) { 
       var selector = $parse(attrs.fileSelect); 
       var modelSelector = elem.append(selector); 

       selector.bind('change', function(event) { 
        scope.$apply(function() { 
         scope[ attrs.fileSelect ] = event.originalEvent.target.files; 
        }); 
       }); 
       scope.$watch(attrs.fileSelect, function(file) { 
       selector.val(file); 
       }); 
      }; 
    }); 

    app.service('fileUpload', ['$http', function ($http) { 
     this.uploadFileToUrl = function(file, uploadUrl){ 
      var fd = new FormData(); 
      fd.append('file', file); 

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

      .success(function(){ 
      }) 

      .error(function(){ 
      }); 
     } 
    }]); 



    </script> 

</body> 
</html>

出典

2016-06-15 Nirbhay Tandon

try $ scope.file = ""; –

@TirthrajBarotこれはうまくいきません、私はすでに試しました。 –

コンソールにはどのようなエラーが表示されますか？ –

明らか機能は

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

以下のように定義する必要があり、以下のスニペットを確認してください。

var app = angular.module('myApp', []); 
 

 
\t app.controller('myCtrl', ['$scope', function($scope){ 
 
\t \t $scope.uploadFile = function(){ 
 
\t \t \t var file = $scope.myFile; 
 

 
\t \t \t console.log('file is '); 
 
\t \t \t console.dir(file); 
 

 
\t \t \t var uploadUrl = "/fileUpload"; 
 
\t \t \t fileUpload.uploadFileToUrl(file, uploadUrl); 
 
\t \t }; 
 

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

 
\t }]);

\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app = "myApp"> 
 

 
\t <div ng-controller = "myCtrl"> 
 

 
\t \t <input type = "file" ng-model = "myFile" file-select="file"/> 
 

 
\t \t <button ng-click="clear()">clear</button> 
 
\t </div> 
 
    </body>

出典

2016-06-15 12:18:16

私のために働いたものは$ scope.file = nullだった;クリア（）;あなたの助けをありがとう。それは正しい方向に私を導いた。 –

はい、それはうまくいくNirbhay ..それは私の最初の答えだったでしょう...しかし、それで任意の指示を使用すると、それは動作しません.. @ NirbhayTandon –

しかし、私は正しい＆この回答に投票してください... @NirbhayTandon –

私はそれを自分で解決することができました。もう1つの機能も追加されました。

<body> 
<div ng-controller="MainCtrl" > 

<table class="table table-bordered" cellspacing="1" cellpadding="2" 
     rules="all" border="0" id="gridSwipeApp" > 

    <tr style="background-color: #009ca6; color: white;" ng-repeat="item in items"><a ng-click="getId(item)"> 
    {{item.content}} 
    </a> 
     <td> 
      <div file-select="file" file-model="myFile"></div></td> 

     <td><button ng-click="clear($index)" ng-model="activeItem.clear">clear</button></td> 
     <td><button ng-click="uploadFile()" ng-model="activeItem.uploadFile"> Upload</button></td> 
    </tr> 
    </table> 
<button type="button" ng-click="addMore()">Add More</button> 


</div> 
<script> 
    var app = angular.module('myApp', []); 
    var template = '<input type="file" name="files"/>'; 

    app.controller('MainCtrl', function($scope) { 
$scope.items=[{ 
    id: 1, 
    myFile: 'item1', 
    clear: 'clearButton1', 
    uploadFile: 'uploadbutton1', 
}]; 

$scope.activeItem = { 
     myFile: '', 
     clear: '', 
     uploadFile: '', 
} 

$scope.addMore = function(){ 
    $scope.activeItem.id = $scope.items.length + 1; 
    $scope.items.push($scope.activeItem); 
    $scope.activeItem ={} 

} 

$scope.file = null; 
$scope.clear = function(index) { 
    $scope.items.splice(index,1); 
    $scope.file = null; 
}; 
}); 

app.directive('fileSelect', function() { 

return function(scope, elem, attrs) { 
var selector = $(template); 
elem.append(selector); 
selector.bind('change', function(event) { 
    scope.$apply(function() { 
    scope[ attrs.fileSelect ] = event.originalEvent.target.files; 
    }); 
}); 
scope.$watch(attrs.fileSelect, function(file) { 
    selector.val(file); 
    }); 
}; 
}); 

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]); 
     }); 
     }); 
    } 

}; 
}]); 

app.service('fileUpload', ['$http', function ($http) { 
this.uploadFileToUrl = function(file, uploadUrl){ 
    var fd = new FormData(); 
    fd.append('file', file); 

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

    .success(function(){ 
    }) 

    .error(function(){ 
    }); 
    } 
}]);

出典

2016-06-16 09:14:13

クリアボタンはAngularJsのアップロードで動作しません

答えて

関連する問題