1

画像アップロード機能を提供する IE8 (クライアント要件) 用の Web サイトを開発しています。CSS を使用して、参照ボタン (つまり、入力タイプ = ファイル) を画像として作成しました (背面の画像と参照ボタンの不透明度を 0 に設定)。

したがって、ユーザーが画像をクリックするたびに、ファイル アップローダー ポップアップを開きたいと思います。2枚の画像を添付しました。1 つは不透明度 0 で、もう 1 つは不透明度なしです。

IN IE8 入力タイプのファイルには、左側にテキスト ボックスが 1 つ、右側に参照ボタンが 1 つあります。アップローダーのポップアップを開くには、ブラウズ ボタンを 1 回クリックしますが、クライアントが望んでいないテキスト ボックスをダブルクリックする必要があります。

回避策として、input type=file の上に新しいボタンを 1 つ追加し、その onclick イベントで、参照ボタンのクリック イベントをトリガーしました。ファイルアップローダーを開きますが、フォーム画像を投稿してもアップロードされず、エラーコード 4 (ファイルがアップロードされていません) で失敗しました。

これをIE8でシングルクリックのみにする方法はありますか。他のすべてのブラウザーでは、シングル クリックのみで完全に機能します。

何か案は？

ありがとう、

参照ボタンがhtmlに表示されます

実際に提示された閲覧ボタン

4

1 に答える 1

2

このフィドルをチェックしてください。

ユーザー以外によるクリックは正しく機能しません。ファイル入力フィールドのスタイルを設定しても、ボタンのサイズが制限を超えて変更されることはないため、ズーム プロパティを使用することができます。

コードの残りの部分がどのように見えるかはわかりませんが、親とファイル入力に次の CSS を使用すると機能するため、ニーズに合わせて値を微調整できます。

.uploadTrigger {
    height: 500px;
    width: 500px;
    background: url("http://i.stack.imgur.com/PTB47.png") center -20px;
    overflow: hidden;
    position: relative;
}
.uploadTrigger input[type="file"] {
    height: 50px;
    width: 50px;
    opacity: 1;
    cursor: pointer;
    zoom: 10;
    -moz-transform: scale(10) translate(22px, 22px);
    position: absolute;
    top: 0;
    left: 0;
}

不透明度を 1 に変更してみると、ボタンが親全体を占めていることがわかります。これにより、ユーザーは 1 回のクリックでファイル選択ウィンドウを開くことができます。

上記のコードは、IE9、Chrome(28)、および Firefox(21) で一貫した動作を提供するように変更されています。内部サイトを開発していて、IE8 のサポートのみが必要であることが確実な場合は、-moz-transform: scale(10) translate(22px, 22px);

後で IE8 でテストし、機能不全であることが判明した場合は更新します。

于 2013-07-18T11:18:57.383 に答える