将 <input type="file" multiple> 文件值传递给单个 <input type="file">答案

【问题标题】：Pass <input type="file" multiple> files values to individual <input type="file">将 <input type="file" multiple> 文件值传递给单个 <input type="file">
【发布时间】：2020-11-03 13:00:06
【问题描述】：

我正在使用一个插件，它只允许在一个字段中上传单个文件。我可以创建多个字段。现在我想要用户一次选择和上传多个文件的功能。假设用户被限制最多上传7个文件并且单个文件输入字段也是7个。我想将多个文件字段的值一一传递给每个单独的单个文件字段。我还想列出用户选择的所有项目。

我创建了一个 jQuery 脚本来处理所有事情，但还没有成功

jQuery(document).ready(function($)
{
    //Array to store the objects from multiple input field
    var fil=[];


    //Adding the new file Upload field
    $('.service-post-main-wrapper').append('<input type="file" id="documents-upload" multiple><button class="fileupload-button">Upload</button>');
    
    //Adding the list that will display the names of files
    $('.service-post-main-wrapper').append('<ul class="files-list"></ul>');

    //On click trigger upload field
    $('.fileupload-button').click(function()
    {
        $('#documents-upload').trigger('click');
    });

    //Listing File names with their values
    function listitems(item,index)
    {
        console.log(item);
        $('.files-list').append('<ul id="filenum-'+index+'" value="'+item.value+'">'+item.name+'</ul>');
    }

    function attachfiles()
    {
        //Fields which I want to pass value too individually 
        var file1=$('#ewd-otp-order-custom-field-5 > input:nth-child(1)');
        var file2=$('#ewd-otp-order-custom-field-6 > input:nth-child(1)');
        var file3=$('#ewd-otp-order-custom-field-7 > input:nth-child(1)');
        var file4=$('#ewd-otp-order-custom-field-8 > input:nth-child(1)');
        var file5=$('#ewd-otp-order-custom-field-13 > input:nth-child(1)');
        var file6=$('#ewd-otp-order-custom-field-14 > input:nth-child(1)');
        var file7=$('#ewd-otp-order-custom-field-15 > input:nth-child(1)');


        //values from list items 
        var val1=$('#filenum-0').val();
        var val2=$('#filenum-1').val();
        var val3=$('#filenum-2').val();
        var val4=$('#filenum-3').val();
        var val5=$('#filenum-4').val();
        var val6=$('#filenum-5').val();
        var val7=$('#filenum-6').val();


        file1.val(val1);
        file2.val(val2);
        file3.val(val3);
        file4.val(val4);
        file5.val(val5);
        file6.val(val6);
        file7.val(val7);

        //I am getting empty strings don't know why
        console.log(file1.val());
        console.log(file2.val());
        console.log(file3.val());
        console.log(file4.val());
        console.log(file5.val());
        console.log(file6.val());
        console.log(file7.val());


    }

    
    $('#documents-upload').on('change',function()
    {
        fil=$(this).get(0).files;
        fil.forEach(listitems);
        attachfiles();
    });


});

【问题讨论】：

标签： javascript php html jquery wordpress

【解决方案1】：

您应该将HTML5 File API 与事件侦听器一起使用。

您将通过var val1 = document.getElementById( 'filenum-0' ).files[0]获取文件数据

原版JS：

var input1 = document.getElementById( 'filenum-0' );
var val1;

input1.addEventListener( 'change', function( e ) {
    e.preventDefault();
    val1 = input1.files;

    console.log( val1 );
} );

自从我用 jQuery 做这件事以来已经有一段时间了，但是这个可能能做到吗？

var val1;
$( '#filenum-0' ).change( function( e ) {
    e.preventDefault();

    val1 = $( this )[0].files;
    console.log( val1 );
} );

【讨论】：