上传前使用javascript重命名文件

时间:2018-12-12 18:26:39

标签: javascript

让我们说一下这样的表单列表:

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会输出文件输入的值

1 个答案:

答案 0 :(得分:2)

这是您链接到的代码,稍后我将对其进行分解。其中很多是香草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进行。

希望这会有所帮助。