자바 스크립트 .innerHTML이 내 <input type = "file">

자바 스크립트에서 여러 파일 업로드와 관련하여 문제가 있습니다. 내가 동적으로 입력을 추가하여 내 자신의 여러 파일 업로드를 만들려고합니다. 이것은 파이처럼 쉽습니다. 그러나 문제는 새로 추가 할 때마다 "file"유형의 이전 입력 필드가 재설정된다는 것입니다.자바 스크립트 .innerHTML이 내 <input type = "file">

내 부모 div의 innerHTML을 변경하는 코드의 마지막 줄을 제거하면 내 값이 재설정되지 않습니다. 누구든지이 문제를 어떻게 해결할 수 있는지 알고 있습니까? 자바 스크립트 코드는 아래에서 찾을 수 있습니다. 미리 감사드립니다.

if(document.getElementById("upload_queue").innerHTML.indexOf(_item) == -1) 
{ 
    var _row = "<tr id='queue_row_" + items_in_queue + "'>"; 
    _row += "<td>"; 
    _row += "<div class='remove_uploaded_image' onclick='remove_from_queue(" + items_in_queue + ")'></div>"; 
    _row += "</td>"; 
    _row += "<td>"; 
    _row += _item; 
    _row += "</td>"; 
    _row += "</tr>"; 

    document.getElementById("upload_queue").innerHTML += _row; 
    document.getElementById("upload_image_" + items_in_queue).style.display = "none"; 

    items_in_queue++; 

    document.getElementById("uploader_holder").innerHTML += 
     '<input id="upload_image_' + items_in_queue + 
     '" name="upload_image_' + items_in_queue + '" accept="image/jpeg" type="file"' + 
     'onchange="add_to_upload_queue()" style="display: inline;" />'; 
}

출처

2011-07-26 Michiel Standaert

부모로부터 모든 요소를 효과적으로 제거하고 새로운 요소를 생성하기 때문에 재설정됩니다. –

+ = 피연산자가 새 요소를 추가하기 전에 모든 것을 제거한다는 것을 알지 못했습니다. 나는 자바 스크립트가 div 뒤에 코드 줄을 추가했다고 생각했다. + = –

을 사용하면'innerHTML'은 단순히 HTML을 문자열로 추가하는 것 이상의 기능을 수행한다. 새 값을 가져 와서 DOM 요소로 구문 분석하고 부모 요소에 추가 (설정)합니다. '+ ='는 기본적으로'foo.innerHTML = foo.innerHTML + '....''과 같습니다. 나는. 'foo'의 내용이 "serialize"되고, 새로운 내용이 추가 된 다음 모든 것이 innerHTML에 할당됩니다. 이미 언급 한 것처럼 모든 자식을 제거하고 전달 된 값을 파싱합니다. –

그래 ... 대신 내부 HTML 수정하는에 appendChild를 사용하려는거야 : 당신이해야 할 일의 일반적인 요점이다

var myInput = document.createElement("INPUT"); 
// do stuff to my input 

var myContainer = document.getElementById("uploader_holder"); 
myContainer.appendChild(myInput);

- 내가 당신 있으면 알려 주시기를 좀 더 구체적인 것을 필요로하지만, JS에 대해 이미 잘 알고있는 것처럼 보입니다 ... 내부 HTML을 설정하는 것보다는 거의 모든 경우에 그렇게하고 싶을 것입니다. ... TD를 TR에 추가해야 할 것입니다. TD에 입력 내용을 추가해야하고, 대상 테이블에 TR 등을 추가해야합니다.

출처

2011-07-26 13:37:49 Brian

자바 스크립트 .innerHTML이 내 <input type = "file">

답변

관련 문제