파일 입력을 jquery로 동적으로 추가 하시겠습니까?

Question

안녕,

내가 reguler 파일 입력을 갈 것입니다 가능한 complatible로 내 weppage하려면, 문제는 내가 여러 업로드를 제공 할 필요가있다.

제 생각에는 첫 번째 입력이 설정되면 초가 표시됩니다 (최대 10 개까지). 5를 채우고 6을 볼 수 있다고 해봅시다. 이제 두 번째 입력을 지우고 두 개의 빈 입력이 생기면 마지막 입력 (6 (비어 있음))을 숨겨야합니다.

jQuery와 함께 할 수 있습니까? 너 한테 모범이 있니?

진심으로 감사드립니다.

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

당신이 diffrent 입력 이름

을 갖고 싶어

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