[jquery] 파일 업로드를 어떻게 동적으로 추가합니까?

Question

여러 파일을 업로드하려고하므로 jquery를 통해 동적으로 업로드 필드를 추가하고 싶습니다. 이제는 "다른 필드 추가"와 같은 버튼이 있고 양식에 새 업로드를 추가하면됩니다.하지만 조금 다르게하고 싶습니다.

처음에는 양식에 입력 필드가 하나 있어야합니다. 사용자가 업로드 할 파일을 선택한 후에 다른 업로드 필드를 즉시 추가하려고합니다. 이 작업을 수행하는 방법에 대한 아이디어가 있습니까?

Answer 1

input 요소는 때 양식 필드의 변경을 발사 가져옵니다 change 이벤트가 있습니다. 그래서 : 당신이 명시 적으로 새로운 요소의 이벤트 후크 필요가 없습니다 의미 delegate를 사용

$('selector_for_your_form').delegate('input[type=file]', 'change', function() { 
    var form = $(this).closest('form'); 
    form.append(/* ... markup for the new field ... */); 
}); 

. 불행하게도, change 일부 브라우저에서 바로 실행되지 않습니다

Live example

업데이트 (나는 당신의 마크 업   — 이상이이 도시 더 나은 찾고 확실히 좀 더 흥미로운   — 될 것입니다 가정) (사용자가 IE7의 필드에서 포커스를 벗어날 때까지 기다린다). 이벤트를 직접 연결하는 경우 jQuery가이 이상 함을 처리하지만 delegate을 사용하는 경우에는 처리하지 않습니다. 그래서 여기에 대안이다 : 마크 업 (그리고 나는 그것이 가정) 단지 input 자체보다 더 복잡

$('selector_for_your_form input[type=file]').change(fileChangeHandler); 
function fileChangeHandler() { 
    var form = $(this).closest('form'); 
    $('<input type="file">').change(fileChangeHandler).appendTo(form); 
} 

경우, 당신은 당신이 바로 그 요소에 change 후킹하고 확인해야합니다. 아니 걱정, 도움 다행 :

Live example

Answer 2

다음과 같이 시도해 볼 수 있습니다.

<input type="file" name="file" onChange="if ($(this).val() != '' {addNewfileInput();}">