자바스크립트 CSS 수정 학습 5장 '업로드'에 스타일 추가_기본지식

var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = '가짜파일';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='pix/button_select.gif';
fakeFileUpload.appendChild(이미지);

var x = document.getElementsByTagName('input');
for (var i=0;i    if (x[i].type != 'file') continue;

if (x[i].parentNode.className != 'fileinputs') continue;

x[i].className = '파일 숨김';

var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(복제);

이렇게 하면 사용자가 업로드한 파일을 변경할 때 쉽고 빠르게 가짜 입력창에 접근하여 경로를 복사할 수 있습니다.
여기서 질문이 있습니다. 어떤 이벤트를 사용합니까? 일반적으로 업로드된 파일이 변경되면 가짜 입력 상자의 값도 변경되는 이벤트를 사용합니다.
그러나 Mozilla 1.6에서는 업로드 상자에서 이 이벤트를 지원하지 않습니다(Firefox는 지원합니다). 그래서 여기에 onmouseout 이벤트를 추가합니다. (IE에서도 실행 가능하지만 Safari에서는 실행 불가)

질문 및 확장
도 있습니다. 사용자가 선택한 질문 이후에는 파일을 취소할 수 없습니다.
사용자가 파일을 선택한 후 갑자기 업로드를 원하지 않는다고 가정해 보겠습니다. 일반적으로 파일 경로를 삭제하는 것만으로도 충분합니다. 하지만 우리의 경우에는 어렵습니다. 한 번 시도해 보세요. 삭제할 수도 있지만 일반적으로 느낌과 반대입니다.
따라서 사용자가 가짜 입력 상자를 수정하여 실제 업로드 경로도 수정할 수 있기를 바랍니다.
허용 선택이 가능합니다. 사용자가 업로드된 파일의 일부를 선택하면 가짜 입력 상자의 전체 내용이 선택됩니다.
[code] x[i].onselect = function () { 2 this.관련Element.select(); 3 }
하지만 JavaScript의 보안상 프로그램이 업로드 경로를 수정하는 것을 허용하지 않으므로 사용자가 수정하도록 허용 실제 업로드 경로를 수정하려면 상자의 내용을 입력하세요. 그래서 나는 onselect 이벤트를 포기하기로 결정했습니다.
가짜 입력 상자에 지우기 버튼을 추가하고 사용자가 이를 클릭하면 원본 업로드 상자를 삭제하고 새 업로드 상자를 생성하는 것도 가능한 방법입니다. 이는 투박하지만 사용자가 업로드하고 싶지 않은 파일 경로를 제거합니다. 나는 이것이 작동하지 않을 것이라고 생각하며 코드의 이 부분을 작성하지 않았습니다.
클릭 이벤트 경로
일부 독자들은 복잡한 CSS를 제거하고 업로드 상자를 완전히 숨긴 다음 가짜 입력 상자의 클릭 이벤트를 실제 업로드 상자에 바인딩할 것을 제안했습니다. 좋은 아이디어이고 위의 것보다 훨씬 간단합니다.
[코드] fakeField.onclick = function () { 2 realField.click() 3 }
이 click() 메서드를 사용하면 양식 항목을 시뮬레이션할 수 있습니다. 확인란을 클릭하고 라디오 상자를 선택하는 등의 작업을 수행합니다. 그러나 Mozilla와 Opera는 이를 지원하지 않습니다. 이유를 알고 싶습니다. 이 방법을 추가할 때 가장 큰 불안한 점은 파일 선택 대화 상자가 팝업된다는 점입니다.
그래서 우리는 이 간단한 방법을 사용할 수 없습니다.
번역 주소: http://www.quirksmode.org/dom/inputfile.html
재인쇄를 위해 다음 정보를 보관해 주세요.
저자: Beiyu(tw:@rehawk)