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

문제
웹사이트에서 내 입력 상자는 다음과 같습니다.

디자이너는 업로드 부분을 다음과 같이 만들고 선택 버튼을 추가하기를 원할 수 있습니다. 하지만 일반 입력 상자를 업로드 상자로 변경하려고 하면 전혀 작동하지 않습니다. 브라우저는 매우 다양하며 기본 버튼 스타일을 지정하는 것은 거의 불가능합니다.

잘 디자인된 업로드 상자는 아니지만 우리가 할 수 있는 최선의 방법입니다.

Safari의 디자인이 조금 다릅니다. 사파리팀에서는 수동으로 파일을 입력하는 기능을 끄고 싶어 이런 오버플로가 걱정될 수도 있습니다. 이 디자인의 한 가지 단점은 사용자가 파일을 선택한 후 업로드를 취소할 수 없다는 것입니다.

솔루션

리더마이클 맥그레이디는 업로드 버튼 스타일 문제를 해결하기 위해 멋진 작은 트릭을 발명했습니다. 이 페이지의 모든 솔루션은 그가 고안한 것입니다. 저는 위치:상대적, 일부 주석 및 테스트를 추가한 다음 JavaScript로 변환했습니다.

이 기술을 사용하지 않는 경우:

사용하고 나면 이렇게 되고 싶어요

지금은 더 좋아보이지 않나요?

McGrady의 방법은 간단하고 우아합니다.

1. 일반 <font face="NSimsun"><input type="file"></font>을 설정하고 position:relative 속성이 포함된 요소에 배치합니다.

2. 또한 상위 요소에 일반 을 추가하고 스타일을 설정합니다. 이 일반 입력이 과 겹칠 수 있도록 절대 위치를 설정합니다.

3. 그런 다음 의 z-index를 2로 설정하여 일반 입력에 표시되도록 합니다.

4. 마지막으로 의 불투명도를 0으로 설정합니다. 이렇게 하면 이 보이지 않고 아래 입력/이미지가 표시되지만 여전히 "찾아보기" 버튼을 클릭할 수 있습니다. 버튼이 이미지 위에 위치하면 이미지를 클릭한 것처럼 나타납니다.

visibility:hidden은 사용할 수 없습니다. 실제로 보이지 않는 요소는 클릭할 수 없기 때문에 클릭할 수 있는 보이지 않는 요소가 필요합니다.

현 시점에서는 순수 CSS를 통해서도 이 효과를 표현할 수 있지만 아직은 좀 부족합니다

5. 사용자가 파일을 선택하면 보이는 가짜 입력 상자에 일반 과 마찬가지로 선택한 파일의 경로가 표시되어야 합니다. 의 내용을 복사하기만 하면 되지만 여전히 JavaScript가 필요합니다.

따라서 이 기술은 JavaScript 없이는 완전히 구현되지 않을 수 있습니다. 그 이유는 잠시 후에 설명하겠습니다. 나는 전체 아이디어를 JavaScript로 작성하기로 결정했습니다. 파일 이름을 표시하지 않고 업로드 상자를 사용하려면 순수 CSS를 사용할 수도 있지만 이는 좋은 생각이 아닙니다.

HTML/CSS 구조
다음 HTML/CSS 구조를 사용할 계획입니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

div.fileinputs {
위치: 상대;
}

div.fakefile {
위치: 절대:
왼쪽: 0px;
z-색인: 1;
}

input.file {
위치: 상대
텍스트 정렬:
-moz-opacity:0 ;
필터:알파(불투명도: 0);
z-index: 2

🎜> .gif" /> 가짜 입력 상자 안에 절대 위치 레이어를 배치합니다.

에는 가짜 입력 상자와 버튼이 포함되어 있으며 해당 위치는 절대값이고 Z-색인 값은 1이므로 실제 업로드 상자 아래에 있을 수 있습니다. .

실제 업로드 상자에도 위치 속성이 관련되어 있으므로 Z-색인 값을 설정할 수 있습니다. 즉, 업로드 상자는 가짜 입력 상자 위에 표시되어야 합니다. 그런 다음 투명도를 0으로 설정하여 보이지 않게 만듭니다.

text-align:right에도 주의를 기울여야 합니다. Mozilla는 업로드 상자의 너비를 설정할 수 없기 때문에 찾아보기 버튼이 DIV의 오른쪽 가장자리에 있는지 확인해야 합니다. 또한 오른쪽에 있어야 하며 실제 항목 아래에 있어야 합니다.

이 예제에서는 작성하지 않은 너비, 높이 테두리 등을 설정하려면 CSS 코드도 필요합니다.

왜 JavaScript인가?

자바스크립트를 사용하는 첫 번째 이유는 가짜 텍스트 상자에 파일 경로를 복사하기 위해서입니다.

둘째, JavaScript는 의미 없는 HTML 코드(

)를 무시하여 코드를 깔끔하게 유지합니다.

마지막으로 CSS를 처리할 수 없는 일부 오래된 브라우저의 경우 Netscape 및 IE4의 파일 입력에 액세스할 수 없습니다. CSS가 없는 브라우저의 경우 사용자는 두 개의 입력 상자를 볼 수 있지만 두 번째 상자의 용도를 이해하지 못합니다.

Netscape 4의 문제

Netscape 4에서는 사용자에게 버튼만 표시됩니다. 어쩌면 position:absolute 때문일 수도 있습니다.

IE4 관련 문제

IE4에서는 원래 "찾아보기" 버튼에 이상한 그림자가 생겨서 클릭할 수 없습니다. 해결책이 없습니다

Netscape 3 문제 CSS 기능이 없는 브라우저의 경우. 작동하더라도 두 개의 입력 상자는 사용자를 좌절하게 만듭니다.

솔루션-자바스크립트 이러한 문제에 대한 해결책은 JavaScript입니다. JavaScript를 통해 입력 상자와 버튼을 생성합니다. 현재 최악의 시나리오는 JavaScript를 실행할 수 없는 경우에도 사용자가 여전히 파일을 업로드할 수 있다는 것입니다. 그다지 예쁘지는 않지만 여전히 작동합니다.

따라서 원래의 복잡한 HTML은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

자바스크립트를 통해 다른 요소를 추가합니다. 코드

코드 복사

코드는 다음과 같습니다.

 
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(이미지); 
    var x = document.getElementsByTagName('input'); 
    for (var i=0;i        if (x[i].type != 'file') continue; 
        if (x[i].parentNode.className != 'fileinputs') 계속; 
        x[i].className = '파일 숨김'; 
        var clone = fakeFileUpload.cloneNode(true); 
        x[i].parentNode.appendChild(복제); 
        x[i].관련Element = clone.getElementsByTagName('input')[0]; 
        x[i].onchange = x[i].onmouseout = function () { 
            this.관련Element.value = this.value; 
        } 
    } 
} 

解释
如果浏览器不支持W3C DOM，那么什么也不做。

复主代码代码如下:

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

创建

和他的内容。需要的时候我们会复复它。

复代码代码如下:

 
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(이미지); 

然后遍历页面上的所有input，如果不是则忽略。

复代代码代码如下:

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

再做一次检测：如果적의父元素没有fileinputs的class，则忽略。

复代码代码如下:

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

이는 숨겨진 이름입니다.

제대码代码如下:

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

제조형 输入框然后添加재적의 父元素上.

제제대码代码如下:

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

저희는 이 회사에서 성장하는 添加了样式입니다.给创建一个属性，指向假的输入框：

复代码代码如下:

x[i].관련Element = clone.getElementsByTagName('input')[0];

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

코드 복사 코드는 다음과 같습니다.

 x[i].onchange = x[i].onmouseout = function () { 
this.관련Element.value = this.value 3 } 

질문 및 확장
도 있습니다. 사용자가 선택한 질문 이후에는 파일을 취소할 수 없습니다.
사용자가 파일을 선택한 후 갑자기 업로드를 원하지 않는다고 가정해 보겠습니다. 일반적으로 파일 경로를 삭제하는 것만으로도 충분합니다. 하지만 우리의 경우에는 어렵습니다. 한 번 시도해 보세요. 삭제할 수도 있지만 일반적으로 느낌과 반대입니다.
따라서 사용자가 가짜 입력 상자를 수정하여 실제 업로드 경로도 수정할 수 있기를 바랍니다.
허용 선택이 가능합니다. 사용자가 업로드된 파일의 일부를 선택하면 가짜 입력 상자의 전체 내용이 선택됩니다.
[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)