JavaScript CSS改造学習第5章「アップロード」にスタイルを追加する

問題
Web サイトでは、入力ボックスは次のようになります。

デザイナーは、アップロード部分を次のようにして、選択ボタンを追加することを希望する場合があります。しかし、通常の入力ボックスをアップロードボックスに変更したい場合は、まったく機能しません。ブラウザは多種多様であり、デフォルトのボタンのスタイルを設定することはほぼ不可能です。

これは適切に設計されたアップロードボックスとは言えませんが、私たちができる最善の方法です。

Safari のデザインが少し異なることに注意してください。 Safari チームはファイルを手動で入力する機能をオフにしたいと考えており、そのようなオーバーフローを心配している可能性があります。この設計の欠点の 1 つは、ユーザーがファイルを選択した後にアップロードをキャンセルできないことです。

解決策

読者Michael McGrady は、アップロードボタンのスタイル設定の問題を解決する素敵なちょっとしたトリックを発明しました。このページのすべてのソリューションは彼によって考案されました。私は、position:relative、いくつかのコメントとテストを追加して、JavaScript に変換しただけです。

このテクニックを使用しない場合:

使ったらこうなりたい

見た目も良くなりましたね?

マグレディのメソッドはシンプルかつエレガントです:

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-index: 1;
}

位置: 相対;
-moz-opacity:0 ;
フィルター:alpha(不透明度: 0);
z-index: 2;

🎜> .gif" /> 絶対位置レイヤーを内部に配置します: 偽の入力ボックス。

には偽の入力ボックスとボタンが含まれており、その位置は絶対値であり、実際のアップロードボックスの下に配置できます。。

実際のアップロードボックスには相対的な位置属性もあり、z-index 値を設定できます。つまり、アップロードボックスは偽の入力ボックスの上に表示される必要があります。次に、透明度を 0 に設定して非表示にします。

text-align:right にも注意する必要があります。Mozilla はアップロードボックスの幅を設定できないため、参照ボタンが DIV の右端にあることを確認する必要があります。も右側にあり、実際のものの下にある必要があります。

幅、高さ、境界線などを設定するための CSS コードも必要になりますが、この例では書きませんでした。

なぜ JavaScript なのか?
JavaScript を使用する最初の理由は、ファイルパスを偽のテキストボックスにコピーすることです。

2 番目に、JavaScript は無意味な HTML コード

を無視し、コードをクリーンな状態に保ちます。

最後に、CSS を処理できない一部の古いブラウザでは、Netscape と IE4 でのファイル入力にアクセスできません。 CSS を持たないブラウザの場合、ユーザーには 2 つの入力ボックスが表示されますが、2 番目の入力ボックスが何のためのものであるか理解できません。

Netscape 4 の問題

Netscape 4 では、ユーザーにはボタンのみが表示されます。おそらく、position:absolute のせいだと思います。

IE4 の問題

IE4では、本来の「参照」ボタンに変な影がついてクリックできません。解決策はありません

Netscape 3 の問題 CSS 機能を持たないブラウザ向け。それは機能しますが、2 つの入力ボックスはユーザーをイライラさせます。

ソリューション - JavaScript これらの問題の解決策は JavaScript です。JavaScript を通じて入力ボックスとボタンを生成します。現時点での最悪のシナリオは、JavaScript が実行できないことですが、それでもユーザーはファイルをアップロードできます。それほどきれいではありませんが、それでも機能します。

元の複雑な HTML は次のようになります:

コードをコピー

コードは次のとおりです:

JavaScript を通じてその他の要素を追加します。

コードコードをコピー

コードは次のとおりです:

 
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(clone); 
 x[i].relativeElement = clone.getElementsByTagName('input')[0]; 
 x[i].onchange = x[i].onmouseout = function () { 
 this.popularElement.value = this.value; 
 } 
 } 
} 

解決
場合は、W3C DOM をサポートしていません。 >
复制代

代码如下: 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;

もう一度検査: 結果の父元素に fileinputs のクラスが存在しない場合、略記します。

复制代码

代码如下: if (x[i].parentNode.className != 'fileinputs') continue; 我々は、追加が必要な上トランスポートに到達しました。最初に、隠しクラス名を追加しました。代码如下:

x[i].className = '隠しファイル';

作成された入力フレームは、その後、の親要素に追加されます。 🎜>
代码如下:

var clone = fakeFileUpload.cloneNode(true); x[i].parentNode.appendChild(クローン); 追加は成功しました。しかし、これでも終わりではないので、ユーザーが入力ボックス内でファイルパスを参照することを推奨します。まず、を作成します。プロパティ，指向假的输入框：

复制代

コードをコピーしますコードは次のとおりです:

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

質問と拡張
もありますユーザーが「ファイルは後でキャンセルできません」を選択する質問です。
ユーザーがファイルを選択した後、突然そのファイルをアップロードしたくないと考えたとします。通常は、ファイルパスを削除するだけで十分です。しかし、私たちの場合、それは難しいです、試してみてください、削除することは可能ですが、通常は感じていることとは逆です。
そのため、ユーザーが偽の入力ボックスを変更することで、実際のアップロードパスも変更できるようにしたいと考えています。
許可の選択が可能です。ユーザーがアップロードされたファイルの一部を選択すると、偽の入力ボックスの内容全体が選択されます。
[code] x[i].onselect = function () { 2 this.popularElement.select(); 3 }
ただし、JavaScript のセキュリティにより、プログラムはアップロードパスを変更できません。ユーザーが変更できるようにするボックスの内容を入力して、実際のアップロードパスを変更します。そこで、onselect イベントを放棄することにしました。
考えられる方法は、偽の入力ボックスにクリアボタンを追加し、ユーザーがそれをクリックしたときに、元のアップロードボックスを削除して新しいアップロードボックスを作成することです。これは扱いにくいですが、ユーザーがアップロードしたくないファイルパスを削除します。これはうまくいかないと思いますが、コードのこの部分は私が書きませんでした。
クリックイベントのパス
一部の読者は、複雑な CSS を削除し、アップロードボックスを完全に非表示にして、偽の入力ボックスのクリックイベントを本物のアップロードボックスにバインドすることを提案しました。素晴らしいアイデアですが、上記よりもはるかに簡単です。
[code] fakeField.onclick = function () { 2 realField.click() 3 }
この click() メソッドを使用すると、フォーム項目をシミュレートできます。チェックボックスがクリックされたり、ラジオボックスが選択されたりします。ただし、Mozilla と Opera はこれをサポートしていません。その理由を知りたいのですが、このメソッドを追加する際の最大の不安は、ファイルを選択するためのダイアログボックスがポップアップ表示されることです。
したがって、この単純な方法は使用できません。
翻訳アドレス: http://www.quirksmode.org/dom/inputfile.html
転載のために以下の情報を保管してください
著者: Beiyu (tw:@rehawk)