在前端改修图片名称代码实现

我不建议在前端修改图片名称，但是如果您仍然想了解如何实现，以下是一种可能的实现方式：

HTML 代码：

<input type="file" id="file-input" multiple>
<input type="text" id="filename-input" placeholder="请输入文件名">
<button id="upload-btn">上传文件</button>

JavaScript 代码：

const fileInput = document.getElementById('file-input');
const filenameInput = document.getElementById('filename-input');
const uploadBtn = document.getElementById('upload-btn');

uploadBtn.addEventListener('click', () => {
  const files = fileInput.files;
  const filenames = filenameInput.value.split(',');

  if (files.length !== filenames.length) {
    alert('请选择相应数量的文件名');
    return;
  }

  const formData = new FormData();

  for (let i = 0; i < files.length; i++) {
    formData.append('files[]', files[i], filenames[i]);
  }

  // 发送 formData 到服务器端
});

这段代码允许用户在文本框中输入多个文件名，每个文件名之间用逗号分隔。当用户点击上传按钮时，它会将文件和文件名打包到一个 FormData 对象中，并将其发送到服务器端。

需要注意的是，这种方式存在很多安全问题，并且容易被攻击者利用。因此，最好的做法是在服务器端生成文件名，并将其返回给客户端。客户端可以在上传文件时将文件名传递给服务器，但是它不应该允许用户在前端修改文件名。