更改输入类型文件选择的名称文件

Question

我想更改由input type=file选择的名称文件，但它不起作用。

这是我的代码：

 $("document").ready(function() { $('body').on('change', '#FileID', function() { var name = document.getElementById('FileID'); name.files.item(0).name = Math.floor(Math.random() * 100000); console.log('Selected file: ' + name.files.item(0).name); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id='FileID' class='class1' type='file' name='Images' value='' />

Answer 1

要更改 File 对象的名称，您需要创建一个新的File实例。
您可以从以前的 File 对象创建一个，它将作为磁盘上数据的简单包装器。

粗略的部分是更新<input type="file">值以使用这个新文件。
现在可以通过我的这个答案中公开的黑客攻击：

 $('body').on('change', '#FileID', function(evt) { const newName = Math.floor(Math.random() * 100000); const input = evt.currentTarget; const previousFile = input.files[0]; const newFile = new File([previousFile], newName); // hack to update the selected file const dT = new DataTransfer(); dT.items.add(newFile); input.files = dT.files; console.log('Selected file: ' + input.files.item(0).name); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id='FileID' class='class1' type='file' name='Images' value='' />

然而，由于这部分仍然主要是 hack，我不能真正推荐它的使用。
因此，如果您不需要在本机输入中显示更新后的值，请不要这样做。 只需更新自定义 UI，并使用FormData上传到您的服务器。 FormData#append(blob, fieldname, filename)的最后一个参数将设置浏览器在表单数据请求中发送的文件名：

 const form = new FormData(); const file = new File(["some data"], "originalname.txt"); form.append("fileField", file, Math.floor(Math.random() * 100000)); console.log("original file's name: ", file.name); new Response(form).text().then((content) => console.log("formdata content: ", content));

因此，您根本不需要上述技巧。

Answer 2

对于在此处结束的任何人试图摆脱文件名，请尝试将其转换为 base64。 这样它就不会附加名称，您可以随意上传它。 我将为此留下一个使用 reactJS 的代码示例。

1：这是使用我们的函数调用 onChange 事件的输入文件类型：

<input onChange={this.handleBackgroundImagePreview} type="file" accept="image/png,image/gif,image/jpeg"></input>

2：然后将该图像转换为base64

handleBackgroundImagePreview = (e) =>{
  // Retrieves the selected Image or file
  const file = e.target.files[0]

  //Calling async file reader with a callback
  let fileBase64 = '';
  this.getBase64(file, (result) => {
      fileBase64 = result;
      console.log(fileBase64)
      //In here you could upload to the server the base 64 data as you want
  });
}

getBase64(file, cb) {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
      cb(reader.result)
  };
  reader.onerror = function (error) {
      console.log('Error: ', error);
  };
}