如何更改文件上傳的名字 - 在角度JS

Question

有沒有什麼辦法，以角JS

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

，並在文件名的方法，我改變了文件名，但價值並沒有改變動態地更改文件名我怎麼能我更改文件上傳中的文件名

$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 
    } 
} 

我想更改上傳文件名...我必須爲每個上傳的文件分配文件名如何？

Answer 1

由於您使用的是angularJS，因此您可以使用指令來更改文件名。

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

從元素調用指令。

<input type="file" file-name="fileName">{{fileName}} 

Answer 2

試試這個

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>

Answer 3

它的只讀值，因此可以使用指令更改文件名。嘗試這種代碼

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>