上传前使用javascript重命名文件

Question

假设我有这样的表格列表：

var forms = document.getElementsByClassName('uploadImage');

此列表中的每个项目如下所示：

<form method=?"post" action=?"/?upload" enctype=?"multipart/?form-data" id=?"f_x" class=?"uploadImage">

?    <input type=?"file" id=?"u_x">?
    <input type=?"submit" value=?"Submit" id=?"s_x">?

</form>?

在哪里 x = [0,1,2,3,4,5]

我如何遍历这个列表并做两件事：

1 - 重命名文件名

2 - 提交上传文件的表格

我在网上找了很多这样的资源：https : //www.telerik.com/forums/change-file's-name-when-it's-uploaded-via-html-form，他们都在使用Jquery，我需要它在JavaScript 中

更新：-

我想出了如何获得每个表单的输入值

forms[0].elements[0] 这将返回列表中第一个表单的第一个输入

forms[0].elements[0].value 此输出文件输入的值

Answer 1

所以这是您链接到的代码，稍后我将对其进行分解。很多都是普通的javascript。

$(document).ready(function() {

    initImageUpload();

    function initImageUpload() {
        $("#btn-submit").click(function(e) {
            e.preventDefault();

            var everlive = new Everlive({
                appId: "",
                scheme: "https"
            });

            // construct the form data and apply new file name
            var file = $('#image-file').get(0).files[0];

            var newFileName = file.filename + "new";
            var formData = new FormData();
            formData.append('file', file, newFileName);


            $.ajax({
                url: everlive.files.getUploadUrl(), // get the upload URL for the server
                success: function(fileData) {
                    alert('Created file with Id: ' + fileData.Result[0].Id); // access the result of the file upload for the created file
                    alert('The created file Uri is available at URL: ' + fileData.Result[0].Uri);
                },
                error: function(e) {
                    alert('error ' + e.message);
                },
                // Form data
                data: formData,
                type: 'POST',
                cache: false,
                contentType: false,
                processData: false
            });
            return false;
        });
    }
});

如前所述，这使用 jQuery$.ajax()创建一个 AJAX POST 到服务器的新 FormData，其中文件的名称已被修改。然后将新的 FormData 发送到服务器而不是 HTML 表单数据。

因此，当单击按钮提交表单时，将阻止此事件。

var file = $('#image-file').get(0).files[0];

然后使用它<input>在 jQuery 中选择元素，然后files从元素中收集信息。

var file = document.getElementById("image-file").files[0];

这可以通过 JavaScript 来完成。除了通过 AJAX 初始化和发送 POST 数据外，大部分脚本的其余部分将保持不变。

最好创建一个将表单发送到的函数，然后它可以返回具有新名称的新表单数据。由于您不想提供 MCVE，因此很难为您提供示例，因为不清楚如何创建或收集新名称的数据。

function nameFile(inEl, newName){
  var file = inEl.files[0];
  var results = new FormData();
  results.append('file', file, newName);
  return results;
}

function sendFile(url, formData){
  var request = new XMLHttpRequest();
  request.open("POST", url);
  request.send(formData);
}

sendFile("/?upload", nameFile(document.getElementById("file-image"), "UserFile-" + new Date().now() + ".jpg"));

另一个问题是，如果您有多个表单和多个提交按钮，哪个会触发所有项目上传？无论哪种方式，您都必须迭代每个表单（可能使用for()循环）从每个表单收集表单数据，更新名称，然后提交每个表单，最有可能通过 AJAX。

希望这可以帮助。