如何使用AngularJS更改文件输入中的文件名？答案

【问题标题】：How to change filename in a file input with AngularJS?如何使用AngularJS更改文件输入中的文件名？
【发布时间】：2017-07-10 21:57:27
【问题描述】：

有什么方法可以更改选择的文件名吗？比如我选择一个文件名img1。在选择文件时，它必须更改为动态名称。有什么办法可以改名吗？

<input type="file" fd-input/>

【问题讨论】：

请提供您的代码，而不是屏幕截图。
您好，Mistalis，正常的，我需要将所选图像名称更改为动态名称。
您是在问是否可以重命名用户计算机上的文件？

标签： javascript angularjs file-upload angular-directive

【解决方案1】：

这是一种在指令中更改文件名的方法：

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

如下使用：

<input type="file" file="param.file" />

JSFiddle demo

【讨论】：

【解决方案2】：

如果您可以访问 FormData，则可以使用 append 方法更改文件名。

请参阅此doc 了解更多信息。

var files = $("#fileUpload").get(0).files;
    if (files.length > 0) {
        var data = new FormData();
        var ext = files[0].name.match(/\.(.+)$/)[1];
        var fileName = Math.random().toString(36).substr(2, 19) + "." + ext;
        // Add the uploaded image content to the form data collection
        if (files.length > 0) {
            //data.append("UploadedImage", files[0]); //if you want to pass default name
            data.append("UploadedImage", files[0],fileName);
        }

HTML 代码 -

<input id="fileUpload" type="file" ng-file-accept="'.jpg , .jpeg ,.bmp , .gif ,.png'" accept="image/*" />

【讨论】：