在不發送表單的情況下顯示一些輸入類型的文本，這些文本等於我的輸入文件中所選文件的數量

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小提琴演示 。

上面的方法依賴於字段集的存在，該字段集標識應該在何處附加創建的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演示 ，可以部分解決這個問題（假設這對您或您的用戶不造成任何不便，方法是刪除以前創建的元素）。

參考文獻：

• appendTo() 。
• 屬性等於（ [attribute="value"] ）選擇器 。
• closest() 。
• empty() 。
• find() 。
• on() 。

Answer 2

我是這樣做的。

$('.j_gallerypdf').click().change(function(){
    var allFiles = this.files;  
    var numFiles = this.files.length;
    $('.j_gfalsepdf').animate({width:'400'}, 500, function(){
     $(this).html('You selected'+ numFiles +'</strong> files.'); 
     for(var i = 0; i<numFiles; i++) {
        var file = allFiles[i], name = file.name;
        $(this).append('<input type="text" name="title[]" value="'+name+'"/>');
     }
   });
});