透明効果を使用してファイル アップロード ボタン コントロールの style_javascript スキルをカスタマイズする

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>アップロード...</title> <style> #ui-upload-holder{ position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;} #ui-upload-input{ position:absolute;top:0px;right:0px;height:100%;cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:999;} #ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;} #ui-upload-filepath{ position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left;} #ui-upload-filepathtxt{ position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px; } .uploadlay{margin:200px; border:1px green solid; width:300px; height:200px; padding:10px; } </style> <div class="uploadlay"> <div id="ui-upload-filepath"> <input type="text" id="ui-upload-filepathtxt" class="filepathtxt"> </div> <div id="ui-upload-holder"> <div id="ui-upload-txt">アップロード</div> <input type="file" id="ui-upload-input" name="myfile"> </div> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

1. 旧バージョンの場合 ブラウザ（IE9以下など、fileAPIをサポートしていない、XMLHttprequestレベル2をサポートしていない、フォームポストファイルしか使用できない）で画像をアップロードする場合、セキュリティ上の理由からフォームポストのみを使用できます。 [type="file"] ファイル 選択ボタンのスタイルは自由に変更できません (ただし、入力の透明度は変更できます)。デザイナーのデザインと互換性がない可能性があります。この場合、透明度効果を使用してカスタマイズできます。アップロードボタン。
2. コントロールの幅は 60 ピクセルを超えないようにするのが最善です。ファイル コントロールの参照ボタンの幅は変更できません。Firefox では約 60 ピクセルです。 60pxを超える場合は、コントロールのマウススタイルを設定しないでください。Firefoxのファイルコントロールのマウススタイルは参照ボタンにのみ適用されるため、マウススタイルを設定するとコントロールの左右のスタイルが不一致になります。 。
3. テキストが垂直方向の中央に配置されるように、コントロール テキスト表示レイヤーの行の高さはコントロール コンテナー レイヤーの高さと一致する必要があります。
4. セキュリティの問題により、ファイル アップロード コントロールは、ファイルをサーバーにアップロードする前に、マウスを使用して参照ボタンをクリックし、ファイルを選択する必要があります (ファイル API はサポートされていません)。ファイル コントロールの () イベントは、js を通じてトリガーされます。ファイル選択ウィンドウをポップアップしてからファイルを選択してファイルをアップロードすることはできません。そのため、ファイル コントロールがテキスト表示レイヤーを覆うようにし、ファイル コントロール スタイルを に設定する必要があります。透明にすると、下のテキストレイヤーが表示されます。
5. xmlhttprequest コンポーネント (レベル 1、レベル 2 は既にバイナリ データのアップロードとクロスドメインをサポートしています) は、ファイルを非同期でアップロードするには、アップロード コントロールを使用し、フォーム ポスト データを使用する必要があります。ファイルのアップロード機能を iframe に個別に配置することも、システム内で実装することも、画像のアップロードを処理するサーバー スクリプトを iframe で開くように指定することもできます (フォームのターゲットを iframe ウィンドウを指すように設定します)。 。

コードをコピー

コードは次のとおりです:<script> document.getElementById("ui-upload-input").onchange=function(){ document.getElementById("ui-upload-filepathtxt").value = this.value; } </script>

#ui-upload-holder{position:relative;width:60px;height:35px;border:1px ソリッドシルバー; overflow:hidden;}
#ui-upload-input{position:absolute;top:0px;right:0px;height:100%;cursor:pointer;不透明度:0;フィルター:アルファ(不透明度:0);z-index:999;}
#ui-upload-txt{ 位置:絶対;上:0px;左:0px;幅:100%;高さ:100 %;line-height:35px;text-align:center;}
#ui-upload-filepath{position:relative;ボーダー:1px ソリッドシルバー;幅:150ピクセル;高さ:35ピクセル;オーバーフロー:非表示; float:left;}
#ui-upload-filepathtxt{position:absolute;上:0ピクセル;左:0ピクセル;幅:100%;高さ:35px;境界線:0px;行の高さ:35px;
.uploadlay{マージン:200px;境界線:1 ピクセルの緑色の実線;幅:300ピクセル;高さ:200ピクセル;パディング:10px; }

上传

document.getElementById("ui-upload-input").onchange=function(){
document.getElementById("ui-upload-filepathtxt").value = this.value;
}