javascript - 显示输入类型文本的数量等于我的输入文件中选定文件的数量，无需发送表单

Question

我同时上传多个 pdf，并且尝试找到一种方法为每个上传的 pdf 提供自定义标题。

所以我首先想到使用 php，我存储一个变量来计算用户选择的 pdf

$countPdfs = count($_FILES['pdfs']['tmp_name']); 

然后在我的表单中，我有一些 php，其中显示文本输入，为我上传的每个 pdf 编写标题。

<div class="galerry">               
    <div class="label">
        <span class="field">Pdfs:</span>
        <input type="file" name="pdfs[]" class="j_gallerypdf" multiple="multiple" accept="application/pdf"  />
        <div class="j_gfalsepdf">Select many pdfs</div>
         <img src="img/upload.png" class="j_gsendpdf"/>
    </div>

   <?php
   if(isset($countPdfs )){
      for($i=1;$i<=$countPdfs ;$i++){
          echo '<div class="label">';
               echo '<span class="field">Pdf Title:</span>';
               echo '<input type="text" name="title" />';
          echo '</div>';
      }
   }
   ?>   
</div>

因此，如果我选择 5 个 pds，它会显示 5 个文本输入，则工作正常。

但是我需要发送我的表单，只有在发送表单后我的输入才会出现。

你知道如何使用 jQuery 来做到这一点吗？在我的输入文件中选择我的 pdf 后，显示的输入文本数量与我选择的 pdf 数量相同？

我已经使用下面的 jQuery 函数在我的输入中显示用户选择的 pdf 数量:

$('.j_gsendpdf').click(function(){
    $('.j_gallerypdf').click().change(function(){
    var numFiles = $(this)[0].files.length;
    $('.j_gfalsepdf').animate({width:'400'}, 500, function(){
        $(this).html('You selected'+ numFiles +'</strong> files.'); 
    });
    });
});

但是你知道如何使用这个 numFiles 来打开与我的 numFiles 变量相关的多个输入文本吗？

Answer 1

一种方法如下:

// binding a change event-handler to the file-input(s):
$('input[type="file"]').on('change', function(){
    // finding the closest '.gallery' element, then finding
    // its descendant 'fieldset' element, removing the 'empty' class
    // (that it has on page-load to hide it while empty):
    var fieldset = $(this).closest('.gallery').find('fieldset').removeClass('empty'),
        // we're using the fileList so we're caching it, the other two are
        // used later (in the for loop):
        files = this.files, curFile, label;

    for (var i = 0, len = files.length; i < len; i++){
        // caching the 'current file' in the prepared variable:
        curFile = files[i];
        // creating a label element, keeping a reference in the
        // prepared variable:
        label = $('<label />', {
            'html' : 'Change the name of <span class="filename">' + curFile.name + '</span>?'
        // appending the created 'label' to the fieldset:
        }).appendTo(fieldset);

        // creating an 'input' element:
        $('<input />', {
            'type' : 'text',
            // the current value is the current file-name:
            'value' : files[i].name
        // appending that to the created/appended 'label' element:
        }).appendTo(label);
    }
});

JS Fiddle demo .

上述方法依赖于一个字段集的存在，该字段集标识创建 input 的位置。应附加元素，因此我将您的 HTML 更改为以下内容:

<form action="#" method="post">
    <div class="gallery">
        <div class="label"> <span class="field">Pdfs:</span>

            <input type="file" name="pdfs[]" class="j_gallerypdf" multiple="multiple" accept="application/pdf" />
            <div class="j_gfalsepdf">Select many pdfs</div>
            <fieldset class="empty">
                <legend>Titles</legend>
            </fieldset>
        </div>
    </div>
</form>

但是，这种方法有点天真:如果您从文件输入中重新选择新文件，它将创建并附加新的 <label>和<input>元素。使用 empty() 可以部分解决这个问题(假设通过删除以前创建的元素不会给您或您的用户带来不便)。 : JS Fiddle demo .

引用文献:

• appendTo() .
• Attribute-equals ( [attribute="value"] ) selector .
• closest() .
• empty() .
• find() .
• on() .