首页 > 解决方案 > Javascript:如果输入值等于文件名,则上传所有文件。单击上传按钮时,在每个输入字段下附加所有相关文件

问题描述

当用户插入一个值并点击上传文档时,如果前3个单词的值等于文件名,则应该上传输入字段下的所有相关文档。所有文件均按命名约定。请参阅上传的图片。我已经动态创建了输入字段,但可以在每个动态输入字段下附加选定的文件。[在此处输入图片描述][1]

<div class="card">
    <div class="card-body">
        <div class="row text-right">
            <div class="col-md-12">
               <input type="file"  multiple="multiple" id="uploadFile1" onclick="uploaddocs()"/>
               <a href="#" class="btn btn-primary add-field" onclick="addtempfield()" ><i class="fas fa plus"></i> Add Item</a>
             </div>
       </div>
              
        <ol class="agenda-wrappe"></ol>
      
    </div>
</div>

function addtempfield(){
    $(".agenda-wrapper").append(`<li>
            <div class="form-group mt-2 d-flex align-items-center" id="me">
                <input type="text" class="form-control" id="item1" name="filter[]">
                <i class="fas fa-times ml-2 delete-input remove_field"></i> 
            </div>
  
        </li>`
    );
$(".agenda-wrapper").on("click",".remove_field", function(e){ 
       e.preventDefault();
       $(this).parents('li').remove();
    })
}
function uploaddocs(){
    $('#uploadFile1').change(function(e){
         //Get all docs in an Array
         let storeDoc = [];
         let fileName = e.target.files;
         for(let i = 0; i<fileName.length; i++){
             //let filecontainer = fileName[i].name.split('_').slice(0,3).join('_');
             let filesplit = fileName[i].name;
             //let filesplit = fileName[i].name;
             storeDoc.push({filesplit});
         }
 
         console.log(storeDoc);

        var element = document.getElementsByName("filter[]");
        for (let i = 0; i < element.length; i++){
           for(let x = 0; x < storeDoc.length; x++){
            //console.log(storeDoc[x].filesplit);
             if(element[i].value.split(' ').slice(0, 3).join('_') == 
             storeDoc[x].filesplit.split('_').slice(0,3).join('_')){[enter image description here][2]
             // $(".listdoc").append(`<p>${storeDoc[x].filesplit}<p>`);
              //am stuck here
            }
           }
        }
        
});

   


  [1]: https://i.stack.imgur.com/bifQN.png
  [2]: https://i.stack.imgur.com/wOccR.png

标签: javascripthtmljquerycssarrays

解决方案


推荐阅读