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()使用新的FormData创建到服务器的AJAX POST，其中文件名已被修改。新的FormData代替HTML Form数据被发送到服务器。

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

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

然后用于在jQuery中选择<input>元素，然后从该元素中收集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);
  result 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进行。

希望这会有所帮助。

上传前使用javascript重命名文件

1 个答案: