用jquery動態添加文件輸入？

Question

嗨，

爲了使我weppage作爲complatible儘可能我將與reguler文件輸入去，問題是，我需要提供多種上傳。

我的想法是，當第一個輸入設置第二個將顯示（最多10）。假設我們已經填充了5個，並且有6個可見。我們現在清除第二個輸入，這將導致兩個空輸入，因此最後一個（6（空））輸入應該被隱藏。

這可能與Jquery？ Maby你有個例子嗎？

請指教。

BestRegards

EDIT1：這是我設法創造，它工作正常。不過，我相信別人，jQuery的更懂可以做出更明智的腳本：

在視圖：

 <div id="fileInput0" class="fileVisible"> 
      <input type="file" id="file0" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(0)" /> 
     </div> 
     <div id="fileInput1" class="fileHidden"> 
      <input type="file" id="file1" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(1)" /> 
     </div> 
     <div id="fileInput2" class="fileHidden"> 
      <input type="file" id="file2" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(2)" /> 
     </div> 
     <div id="fileInput3" class="fileHidden"> 
      <input type="file" id="file3" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(3)" /> 
     </div> 
     <div id="fileInput4" class="fileHidden"> 
      <input type="file" id="file4" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(4)" /> 
     </div> 
     <div id="fileInput5" class="fileHidden"> 
      <input type="file" id="file5" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(5)" /> 
     </div>   
     <div id="fileInput6" class="fileHidden"> 
      <input type="file" id="file6" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(6)" /> 
     </div> 
     <div id="fileInput7" class="fileHidden"> 
      <input type="file" id="file7" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(7)" /> 
     </div> 
     <div id="fileInput8" class="fileHidden"> 
      <input type="file" id="file8" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(8)" /> 
     </div> 
     <div id="fileInput9" class="fileHidden"> 
      <input type="file" id="file9" name="files" /> 
      <input type="button" value="Töm" onclick="resetFileField(9)" /> 
     </div> 

腳本：

function fileChangeHandler() { 

    var hiddenClass = 'fileHidden'; 
    var visibleClass = 'fileVisible'; 

    var parentDiv = $(this).parent; 
    var idNr = $(this).attr('id').replace('file', ''); 

    idNr++; 

    if($(this).val().length > 0){ 

     for(var i = idNr; i < 10; i++){ 
      if($('#fileInput' + i).hasClass(visibleClass)){ 
       if($('#file' + i).val().length < 1){ return;} 
      } 
      else{ 
        $('#fileInput' + i).attr('class' , visibleClass); 
        return; 
      } 
     } 
    } 
} 

function resetFileField(id) { 
    var hiddenClass = 'fileHidden'; 
    var visibleClass = 'fileVisible'; 
    var counter; 

    $('#fileInput'+id).html($('#fileInput'+id).html()); 
    $('#file'+id).change(fileChangeHandler); 

    for(var i = 9; i > -1 ;i--) 
    { 

     if(id != i) 
     { 
      if($('#fileInput' + i).hasClass(visibleClass)){ 
       if($('#file' + i).val().length < 1){ 
        $('#fileInput' + i).attr('class', hiddenClass); 
       } 
      } 
     } 
    } 
} 

如果你找到一個更好的解決辦法，懇求讓我知道。

Answer 1

你可以有一個div容器，這將懷有新的文件輸入框和按鈕添加新的投入：

$('#addFile').click(function() { 
    // when the add file button is clicked append 
    // a new <input type="file" name="someName" /> 
    // to a filesContainer div 
    $('#filesContainer').append(
     $('<input/>').attr('type', 'file').attr('name', 'someName') 
    ); 
}); 

Answer 2

是的，你可以添加文件輸入到表格，就像任何其他元素：

$("#theForm").append("<input type='file' name='foo'>"); 

我以爲這使不熟悉的：[jquery]How do I add file uploads dynamically?

Answer 3

另一種選擇是，因爲您使用的是JQuery，因此是Bootstrap fileInput。它可以讓你用一個控件上傳多個圖像。您還有其他的選擇太像允許的文件類型，大小，高度，寬度等

<script type="text/javascript"> 
    $("#postedImage").fileinput({ 
     uploadUrl: "/SomeUrl", // you must set this for ajax uploads 
     maxFileCount: 10, 
     enctype: "multipart/form-data", 
     overwriteInitial: false 
    }); 
</script> 

<input id="postedImage" type="file" class="file" multiple> 

Here是其他上傳的鏈接，如果你有興趣。

Answer 4

，如果你想擁有不同勢輸入名稱

var i; 
$('#addFile').click(function() { 
    i=i+1; 
    $('#filesContainer').append(
     $('<input/>').attr('type', 'file').attr('name', 'file'+i) 
    ); 
});