如何在隐藏输入字段中保存数组的值，然后再将其替换为新数组

Posted 2023-05-07

【中文标题】如何在隐藏输入字段中保存数组的值，然后再将其替换为新数组

【英文标题】：How to save the values of an array within an hidden input field before it gets replaced with a new array

【发布时间】：2017-05-26 08:50:42

【问题描述】：

我有一个应用程序，用户可以通过表单将图像上传到数据库中。最多可上传 6 张照片。用户可以同时选择 6 张照片，也可以在提交表单之前单独选择最多 6 次照片。然后我有一个隐藏的输入字段，可以按照以下方式选择文件名。

<div id="content" >
    <input type="file" name="files[]" id="filer_input2" multiple>
    <input type="hidden" class="mediafile" name="mediafile"/>
</div>

问题是当用户单击上传区域时，隐藏的输入字段会丢失以前存储的数据。下面是 jquery 位和屏幕截图，没有隐藏输入以进行演示。我想知道如何在用户第二次或第三次选择文件时将文件名添加到输入字段而不是替换它....

    <script>
$(document).ready(function()
            $('#filer_input2').change(function()

        var files = $(this)[0].files;
        var output = "";
        if(files.length > 0)

       for (var i = 0; i < files.length; i++) 
            output += files[i].name+",";
           

        $(".mediafile").val(output);

             
        );
);
</script>

【问题讨论】：

您的表单是正常发布还是使用 AJAX 发布？如果是正常的回发，你肯定会丢失这些值，除非你不将它保存在服务器端并在表单成功提交并得到响应后设置它。

表单用php正常发布

好吧，一旦表单提交成功，您必须使用会话或 cookie 或本地存储将已选择的文件名存储在服务器端。这样您就可以轻松地检索和应用您的验证。

【参考方案1】：

对于那些遇到此问题的人，以下是我解决此问题的方法：

$(document).ready(function()

        $('#filer_input2').on('change',function()
            if(!$(".mediafile").val())
        var files = $(this)[0].files,
            output = "";
        for (var i = 0; i < files.length; i++) 
            output += files[i].name+",";
                   
        $(".mediafile").val(output);

            else if($(".mediafile").val())                    
              var prev_input_file = $(".mediafile").val();
              var new_files = $(this)[0].files,
              new_output = "";
              for (var j = 0; j < new_files.length; j++)
                new_output += new_files[j].name+ ",";
              
             $(".mediafile").val(new_output + prev_input_file)
           

        );

);