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

Question

我有一个应用程序，用户可以通过表单将图像上传到数据库中。最多可上传 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>

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

        });

});