Question

我是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>

Answer 1

清除功能应定义如下

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

检查下面的代码段。

＆＃13;

var app = angular.module('myApp', []);

	app.controller('myCtrl', ['$scope', function($scope){
		$scope.uploadFile = function(){
			var file = $scope.myFile;

			console.log('file is ' );
			console.dir(file);

			var uploadUrl = "/fileUpload";
			fileUpload.uploadFileToUrl(file, uploadUrl);
		};

		$scope.clear = function () {
			angular.element("input[type='file']").val(null);
		};

	}]);

＆＃13;

	<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">

	<div ng-controller = "myCtrl">

		<input type = "file" ng-model = "myFile" file-select="file"/>

		<button ng-click="clear()">clear</button>
	</div>
  </body>

＆＃13;

Answer 2

我能够自己解决这个问题。还增加了一个功能。

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

Clear Button不适用于AngularJs中的上传

2 个答案: