如何更改角度js中的fileupload名称

时间:2017-10-06 07:25:21

标签: javascript angularjs

有没有办法在角度js中动态更改文件名

<input type="file" onchange="angular.element(this).scope().filename(this)">

并且在filename方法中我正在更改文件名,但值不会改变我如何更改文件上传中的文件名

$scope.filename= function(e)
{

 for (var i = 0; i < e.files.length; i++) {

 var x =  e.files[i].name + "test";
 e.files[i].name =  x;
 /// here i am changing the file name but it shows its 
  read only property how can i change the name
  }
}

我想更改上传文件名...我必须为每个上传的文件分配文件名如何?

3 个答案:

答案 0 :(得分:1)

试试这个

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.filename = function(e) {
    for (var i = 0; i < e.files.length; i++) {

      var x = e.files[i].name.split('.')[0] + "test." + e.files[i].name.split('.')[1];
      console.log(x);
      e.files[i].name = x;

    }
  }

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

<div ng-app="myApp" ng-controller="myCtrl">

  <input type="file" onchange="angular.element(this).scope().filename(this)">

</div>

答案 1 :(得分:0)

由于您使用的是angularJS,因此您可以使用指令更改文件名。

docker run --cpus="1" ...

从元素中调用指令。

.directive('fileName', function() {
  return {
    scope: {
      fileName: '='
    },
    link: function(scope, el, attrs) {
      el.bind('change', function(event) {
        var files = event.target.files;
        var file = files[0];
        scope.file = 'Newname';
        scope.$apply();
      });
    }
  };
});

答案 2 :(得分:0)

它的readonly值,所以你可以使用指令更改文件名。试试这个代码

var module = angular.module('myApp', []);
module.directive('file', function() {
  return {
    scope: {
      file: '='
    },
    link: function(scope, e, attrs) {
      e.bind('change', function(event) {
        var files = event.target.files;
        var file = files[0];
        scope.file = file.name.split('.')[0] + "_test." + file.name.split('.')[1];
        scope.$apply();
      });
    }
  };
});

function MainController($scope) {
  $scope.file = {};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
  <input type="file" data-file="file.file" />
  <div>Update File Name: {{file.file}}</div>


</div>