Question

我有以下内容。

<form method="post" action="/send" enctype="multipart/form-data">
    <input type="file" name="filename" id="AttachFile">
</form>

我想更改用户上传的文件的名称。

如果用户选择“ Document.docx”，我想将其更改为“ Bank-Document.docx”。

我仍然想读取用户选择的文件，而不是其他文件，而是在发送到服务器时使用一个不同的名称。

我在不允许对服务器端进行控制的应用程序范围内工作，因此理想情况下，我需要在客户端上执行此操作。此外，我需要它在form的范围内工作。

我尝试了以下各种变化，但均未成功：

document.getElementById("AttachFile").name = "test.txt"
document.getElementById("AttachFile").files = "test.txt"
document.getElementById("AttachFile").value ="test.txt"

Answer 1

您可以通过File API进行操作。我们还可以将Blob API用作compatible with Microsoft edge。

var file = document.getElementById("AttachFile").files[0];
var newFile = new File([file], "Bank - Document.docx", {
  type: file.type,
});

这是一个完整的示例。—请参见注释：

HTML：

<input type="file" id="AttachFile">
<input type="button" id="BtnSend" value="Send">

JavaScript：

document.getElementById("BtnSend").addEventListener("click", function() {
    // Get the file the user picked
    var files = document.getElementById("AttachFile").files;
    if (!files.length) {
        return;
    }
    var file = files[0];
    // Create a new one with the data but a new name
    var newFile = new File([file], "Bank - Document.docx", {
      type: file.type,
    });
    // Build the FormData to send
    var data = new FormData();
    data.set("AttachFile", newFile);
    // Send it
    fetch("/some/url", {
        method: "POST",
        body: data
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        }
        return response.text(); // or response.json() or whatever
    })
    .then(response => {
        // Do something with the response
    })
    .catch(error => {
        // Do something with the error
    });
});

Answer 2

您不能使用标准的form提交来重命名文件。正在上传的文件的name是只读的。为此，您必须在服务器端进行。（文件上传的设计者似乎没有考虑过此重命名用例，或者认为不需要由API解决。）

但是，您可以阻止默认表单提交，而是通过ajax以编程方式提交，这样做允许您重命名文件；参见man tou's answer。

Answer 3

如果无法在服务器端工作，则必须在上传之前或下载之后重命名文件。您如何确定用户名称的名称。

更改客户端上载文件的名称

3 个答案: