자바 스크립트를 사용하여 파일 업로드 상자를 동적으로 생성

Question

사용자가에서 파일을 선택할 수있는 html/javascript 세트를 작성하려고합니다. 다른 것을 표시합니다.

function displayFileInput() { 
var counter = document.getElementById("counter").value; 
var n = (parseInt(counter)+1).toString(); 
var element = document.getElementById("container"); 
var string = "<br /><input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\" />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\" />"; 
element.innerHTML = element.innerHTML + string; 
document.getElementById("counter").value=n; 
return false;} 

내가 사용 HTML 코드는 이것이다 :

<form enctype=\"multipart/form-data\" method = \"post\" action=\"newPost.php\" id = \"rental_form\"> 
<input type = \"text\" name = \"rent_name\" size = \"30\" value = \"Insert your post title here\"/><br /> 
<textarea rows= \"20\" cols = \"100\" name = \"rent_posttext\"> 
Insert your post text here! 
</textarea><br /> 
<div id = \"container\"> 
<input type = \"file\" name = \"file1\" onchange = \"javascript:displayFileInput()\" /> 
Default:<input type = \"radio\" name = \"main_picture\" value = \"1\" /> 
</div> 
<input type = \"submit\" /> 
<input type = \"text\" id = \"counter\" value = \"1\" style = \"display:noe;\"> 

모든 처음에 작동하는 것 같다,하지만 문제는 이것이다 : 최대한 빨리 파일을 선택할 때, 그것은 정확하게 다른 파일을 표시합니다 상자에 있지만 이전 파일의 정보를 제거합니다. 예를 들어 Google 크롬에서 '파일 선택'입력 버튼 옆에 '파일을 선택하지 않았습니다.'라고 표시됩니다.

PHP 스크립트에 양식을 제출하면 파일을 인식하지만 각 파일에 대해 "4"오류가 등록되므로 파일이 업로드되지 않았습니다. 어떻게 든 새로운 파일 입력을 동적으로 생성 할 때 모든 파일 정보를 제거합니다. 도움!

element.innerHTML = element.innerHTML + string; 

이것은 완전히 요소의 내용을 교체하고, 그 과정에서 이전 사용자 선택 (들)을 닦아된다

Answer 1

귀하의 문제는 같이가는 부분에 의해 발생되고있다. innerHTML = ...; 대신 appendChild을 사용하면 더 나은 결과를 얻을 수 있지만 코드를 다시 작성해야합니다. 이 같은

뭔가 작업을해야합니다 :

function displayFileInput() { 
    var counter = document.getElementById("counter").value; 
    var n = (parseInt(counter)+1).toString(); 
    var element = document.getElementById("container"); 
    var newInput = document.createElement("div"); 
    var string = "<input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\" />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\" />"; 
    newInput.innerHTML = string; 
    element.appendChild(newInput); 
    document.getElementById("counter").value=n; 
    return false; 
} 

예 : http://jsfiddle.net/dsKFr/

는 또한, 당신이 당신의 HTML 마크 업의 모든 따옴표를 이스케이프 할 필요가 없습니다. 그냥 자바 스크립트 버전 (심지어 거기에 큰 따옴표로 작은 따옴표를 교대로 주위에 얻을 수).