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

WBOY
リリース: 2016-05-16 17:46:39
オリジナル
983 人が閲覧しました


[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;
}



関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート