如何在用新数组替换之前将数组的值保存在隐藏的输入字段中

Question

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

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

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

    <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>

Answer 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)
           }

        });

});

如何在用新数组替换之前将数组的值保存在隐藏的输入字段中

How to save the values of an array within an hidden input field before it gets replaced with a new array

jquery

jquery-filer