jQuery：重複文件輸入組

Question

我想使用jQuery來複制我的文件輸入組，以便當用戶選擇一個文件上傳時，它會自動創建另一個文件上傳字段和說明字段。

這工作正常，除了當我更改文件的文件，我已經選擇了一個輸入。當我這樣做時，它會複製所有文件輸入組。

任何洞察爲什麼這是怎麼回事？

的jsfiddle：http://jsfiddle.net/czLmbjd6/4/

HTML：

<div id = "add-photos"> 
    <input type="file"></input> 
     <label>Description:</label> 
     <input type = "text"></input> 
    </div> 

    <div id = "additional-photos"> 
    </div> 

JS：

$(document).ready(function(){ 
    bindFileInputs(); 
}); 

function bindFileInputs(){ 
    $("input:file").change(function(){ 
     addPhotoField(); 
    }); 
} 


function addPhotoField() { 
    var id = 1; //standin for now, will dynamically update this number later 
    createPhotoField(id); 
} 

function createPhotoField(id){ 

    var p = $("#add-photos"); 

    p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){ 
     $(this).val(''); 

     if ($(this).attr('type') == 'file'){ 
      console.log("type is file"); 
      $(this).attr('name', 'data[Image][' + id + '][image]'); 
     } 

     if ($(this).attr('type') == 'text'){ 
      console.log("type is text"); 
      $(this).attr('name', 'data[Image][' + id + '][description]'); 
     } 

     }); 
    bindFileInputs(); 
} 

Answer 1

嘗試

$(document).ready(function() { 
 
    bindFileInputs($('#add-photos input[type="file"]')); 
 
}); 
 

 
function bindFileInputs(input) { 
 
    //use one() to register a handler which will be fired only once 
 
    input.one('change', function() { 
 
    addPhotoField(); 
 
    }); 
 
} 
 

 

 
function addPhotoField() { 
 
    var id = 1; //standin for now, will dynamically update this number later 
 
    createPhotoField(id); 
 
} 
 

 
function createPhotoField(id) { 
 

 
    var p = $("#add-photos"); 
 

 
    var $clone = p.clone().appendTo("#additional-photos").removeAttr("id"); 
 

 
    $clone.find('input,select').val(''); 
 
    $clone.find('input:text').attr('name', 'data[Image][' + id + '][description]'); 
 
    var $file = $clone.find('input:file').attr('name', 'data[Image][' + id + '][image]'); 
 
    bindFileInputs($file) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Select a file with the file upload control. It should create a new file input group. 
 
<div id="add-photos"> 
 
    <input type="file" /> 
 
    <label>Description:</label> 
 
    <input type="text" /> 
 
</div> 
 
<div id="additional-photos"></div>

Answer 2

那麼試試這個

<div id = "add-photos"> 
<input type="file" inuse="false"></input> 
    <label>Description:</label> 
    <input type = "text"></input> 
</div> 

<div id = "additional-photos"> 
</div> 





    $(document).ready(function(){ 
    bindFileInputs(); 
}); 

function bindFileInputs(){ 
    $("input:file").change(function(){ 

     if($(this).attr('inuse') == "false"){ 
      addPhotoField();     
     }   
     $(this).attr('inuse', 'true'); 
    }); 
} 

var id = 0; 
function addPhotoField() { 
    id += 1; //standin for now, will dynamically update this number later 
    createPhotoField(id); 
} 

function createPhotoField(id){ 
    $("#add-photos").find('input:file').attr('inuse', 'false'); 
    var p = $("#add-photos"); 

    p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){ 
     $(this).val(''); 

     if ($(this).attr('type') == 'file'){ 
      console.log("type is file"); 
      $(this).attr('name', 'data[Image][' + id + '][image]'); 
      $(this).attr('inuse', 'false'); 
     } 

     if ($(this).attr('type') == 'text'){ 
      console.log("type is text"); 
      $(this).attr('name', 'data[Image][' + id + '][description]'); 
     } 

     }); 
    $("#add-photos").find('input:file').attr('inuse', 'true'); 
    bindFileInputs(); 
} 

Answer 3

試試這個JS：

$(document).ready(function(){ 
     bindFileInputs(); 
    }); 

    function bindFileInputs(){ 
     $("input:file").change(function(){ 

      if($('.newF').length ==0){ 
       createPhotoField(Number($(this).attr('id'))+1); 
      } 
      if($(this).hasClass('newF')){ 
      createPhotoField(Number($(this).attr('id'))+1); 
      } 
     }); 
    } 




    function createPhotoField(id){ 
     $('.newF').removeClass('newF') 
     id+=1; 
     var p = $("<div/>"); 
p.appendTo("#additional-photos"); 

     p.html('<input class="newF" id= "'+id+'" type="file"></input><label>Description:</label><input type = "text"></input>') 

     p.children().find('input,select').each(function(){ 
      $(this).val(''); 

      if ($(this).attr('type') == 'file'){ 
       console.log("type is file"); 
       $(this).attr('name', 'data[Image][' + id + '][image]'); 
      } 

      if ($(this).attr('type') == 'text'){ 
       console.log("type is text"); 
       $(this).attr('name', 'data[Image][' + id + '][description]'); 
      } 

      }) 
     bindFileInputs(); 
    } 

修訂FIDDLE： http://jsfiddle.net/czLmbjd6/12/

Answer 4

見你的bindFileInputs();呼叫createPhotoField。您正在爲頁面中所有$("input:file")元素的change事件添加另一個處理程序。如果您在這些元素（除最後一個元素之外）中更改文件，addPhotoField將觸發兩次或更多次。

務必：

var newItem = p.clone(); 
newItem.appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){ 
    ... 
}); 

// instead of bindFileInputs(); 
newItem.find("input:file").change(function(){ 
    addPhotoField(); 
});