用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) 
    ); 
});