JavaScript CSS 수정 학습 제5 장"업로드"에 스타일 추가

 
<div class="fileinputs"> 
    <input type="file" class="file"> 
</div> 

 
var W3CDOM = (document.createElement && document.getElementsByTagName); 
function initFileUploads() { 
    if (!W3CDOM) return; 
    var fakeFileUpload = document.createElement('div'); 
    fakeFileUpload.className = 'fakefile'; 
    fakeFileUpload.appendChild(document.createElement('input')); 
    var image = document.createElement('img'); 
    image.src='pix/button_select.gif'; 
    fakeFileUpload.appendChild(image); 
    var x = document.getElementsByTagName('input'); 
    for (var i=0;i<x.length;i++) { 
        if (x[i].type != 'file') continue; 
        if (x[i].parentNode.className != 'fileinputs') continue; 
        x[i].className = 'file hidden'; 
        var clone = fakeFileUpload.cloneNode(true); 
        x[i].parentNode.appendChild(clone); 
        x[i].relatedElement = clone.getElementsByTagName('input')[0]; 
        x[i].onchange = x[i].onmouseout = function () { 
            this.relatedElement.value = this.value; 
        } 
    } 
} 

 
var W3CDOM = (document.createElement && document.getElementsByTagName); 
function initFileUploads() { 
    if (!W3CDOM) return; 


var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='pix/button_select.gif';
fakeFileUpload.appendChild(image);
그리고 페이지 의 모든 input 을 옮 겨 다 니 며
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
    if (x[i].type != 'file') continue;
재 검 측: if (x[i].parentNode.className != 'fileinputs') continue; 에서 스타일 을 추가 해 야 할 업로드 상 자 를 찾 았 습 니 다.우선 hidden 의 클래스 이름 을 추가 합 니 다.

 x[i].className = 'file hidden'; 

가짜 입력 상 자 를 복사 한 다음 var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone); 지금 우 리 는 스타일 을 성공 적 으로 추가 했다.그러나 아직 끝나 지 않 았 습 니 다.입력 상자 에서 파일 경 로 를 보 기 를 바 랍 니 다.우선에 속성 을 만 듭 니 다.가짜 입력 상 자 를 가리 키 는 것 입 니 다.

 x[i].relatedElement = clone.getElementsByTagName('input')[0]; 

이렇게 하면 사용자 가 파일 을 업로드 할 때 우 리 는 가짜 입력 상자 에 쉽게 접근 한 다음 경 로 를 복사 할 수 있 습 니 다.여기 서 문제 가 있 습 니 다.우 리 는 어떤 이 벤트 를 사용 합 니까?보통 change 이 벤트 를 사용 합 니 다.파일 을 업로드 할 때 가짜 입력 상자 의 값 도 변 합 니 다.하지만 Mozilla 1.6 은 업로드 상자 에서 이 이벤트(Firefox 지원)를 지원 하지 않 습 니 다.그래서 나 는 여기에 onmouseout 의 사건 을 추가 했다.IE 에서 도 실행 할 수 있 습 니 다.Safari 는 안 됩 니 다.

 x[i].onchange = x[i].onmouseout = function () { 
this.relatedElement.value = this.value; 3 } 

문제 와 확장 에 또 하나의 문제 가 있 습 니 다.사용 자 는 파일 을 선택 한 후에 취소 할 수 없습니다.사용자 가 파일 을 선택 했다 고 가정 한 후에 갑자기 업로드 하고 싶 지 않 았 다.보통 파일 경로 만 삭제 하면 됩 니 다.하지만 우리 의 예 에 서 는 어렵 습 니 다.한번 해 보 세 요.지 울 수 있 지만 느낌 과 는 반대 입 니 다.그래서 저 희 는 사용자 가 가짜 입력 상 자 를 수정 함으로써 진정한 업로드 경 로 를 수정 할 수 있 기 를 바 랍 니 다.선택 을 허용 하 는 것 은 가능 하 다.사용자 가 파일 을 올 리 는 모든 부분 을 선택 하면 전체 가짜 입력 상자 의 모든 내용 을 선택 합 니 다.[code] x[i].onselect = function () { 2 this.relatedElement.select(); 3}그러나 자 바스 크 립 트 의 안전성 은 프로그램 이 업로드 경 로 를 수정 하 는 것 을 허용 하지 않 기 때문에 입력 상자 의 내용 을 수정 하여 실제 업로드 경 로 를 수정 할 수 없습니다.그래서 저 는 onselect 사건 을 포기 하기 로 했 습 니 다.가짜 입력 상자 에 명확 한 단 추 를 추가 하고 사용자 가 클릭 하면 원래 업로드 상 자 를 삭제 하고 다시 만 드 는 것 이 가능 한 방법 입 니 다.이것 은 비록 무 겁 지만 사용자 가 업로드 하고 싶 지 않 은 파일 경 로 를 확실히 삭제 할 수 있다.나 는 이것 이 반드시 일 을 할 수 있다 고 생각 하지 않 는 다.나 도 이 부분의 코드 를 쓰 지 않 았 다.이벤트 경 로 를 클릭 하면 복잡 한 CSS 를 제거 하고 업로드 상 자 를 철저히 숨 긴 다음 가짜 입력 상자 의 click 이 벤트 를 실제 업로드 상자 에 연결 하 는 것 이 좋 습 니 다.아주 좋 은 생각 입 니 다.그리고 위의 것 보다 훨씬 간단 합 니 다.code]fakeField.onclick=function(){2 realField.click()3}이 click()방법 은 폼 항목 을 모방 할 수 있 습 니 다.체크 상자 의 클릭,체크 상자 가 선택 되 었 습 니 다.하지만 모 질 라 와 오페라 는 지원 하지 않 는 다.이 방법 을 추가 하 는 가장 큰 안전성 은 파일 을 선택 하 는 대화 상 자 를 팝 업 하 는 데 있 기 때 문 입 니 다.그 러 니까 우리 도 이 간단 한 방법 으로번역 주소:http://www.quirksmode.org/dom/inputfile.html 다음 정 보 를 보관 하 십시오:북 옥(tw:@rehawk)