如何使用 JavaScript 将文件上传路径附加到表单？

Question

以下是我拥有的一些 jQuery/JavaScript 代码，用于处理我拥有的表单上的文件上传。用户可以根据需要上传任意数量的文件，上传文件后，我会在 Div 中显示上传文件的预览图像。

我需要帮助的是，我需要以某种方式将上传的文件添加到隐藏的表单字段中，这样当他们提交表单时，它会发布与其他文件一起上传的每个文件的文件名/路径表单数据到我的后端 PHP 脚本。

我只是不确定最好的方法吗？

我在想这样的事情可能会奏效......

<input type="text" name="uploads[]" id="uploads" value="FILE PATH HERE">

但我不确定如果上传超过 1 次，每次添加新文件时这是否会覆盖以前的值？

关于如何处理这个问题的任何想法？我真正需要的是在提交表单后访问后端中每个上传文件的文件名。

jQuery(function () {
    jQuery('#fileupload').fileupload({
        url: '<?php echo Mage::getUrl('signwizard/index/saveFile') ?>',
        sequentialUploads: true,
        dataType: 'json',
        dropZone: jQuery('#dropzone'),
        pasteZone: jQuery(document),
        autoUpload: true,

        done: function (e, data) {
            jQuery.each(data.result.files, function (index, file) {
                jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));


                // Add Uploaded image path and name to a Form field so thatr the file path will be posted when the Form is submitted.....

            });
        }
    });
});

Answer 1

详细说明我的评论，只要为每个文件附加一个新的输入，就可以了：

done: function (e, data) {
    jQuery.each(data.result.files, function (index, file) {
         jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));

         jQuery('#yourformid').append('input type="hidden" name="uploads[]" value="'+file.name+'">');

     });
}

Answer 2

只需为每个文件添加一个新输入，(jQuery v3.6.0)

done: function (data) {
     $.each(data, function(index, value) {    
         $('#yourformid').append('<input type="hidden" name="uploads[]" value="'+value.fileName+'">');

     });
}