14

次のようにダイブされるスクリプトがあります。

HTML:

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

JavaScript (JQuery 2):

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

CSS:

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

注:この問題は、IE で点滅するアイコンを非表示にするためにぼかしが適用される前に存在していました。

Chrome と Firefox では、ボタンを 1 回クリックするだけで済みます。IE 10 ではダブルクリックが必要ですが、これは望ましくありません。シングルクリックにする方法を考えようとしています。

これまでに試したことは.render("click")、入力をオンにすることだけですが、うまくいきませんでした。

JSFiddle: http://jsfiddle.net/plowdawg/mk77W/

4

6 に答える 6

5

SDLion の発言 をフォローアップするには....
これはあなたが見ているものかもしれませんが
これはあなたが見るものです
、実際にはその上に透過的にされたファイル アップロード コントロールがあります。 しかし、その上に、透明化されたファイル アップロード コントロールがあります。
参照ボタンをクリックすると、ワンクリックでファイルアップロードダイアログが表示されます。IE の場合、ファイル アップロード ダイアログを表示するには、テキスト ボックスの左側にあるテキスト ボックスをダブルクリックする必要があります。

ファイル入力のフォント サイズを大きくしてボタン イメージを埋めます
ファイル入力のフォント サイズを大きくしてボタン イメージを埋めます

于 2015-02-05T13:44:50.967 に答える
3

@bastos.sergio はテキスト セクションで起こっていることについては正しいですが、JavaScript の使用に慣れている場合は、これを回避する方法があります。

必要になるだろう：

  • ラッパー div タグ
  • 内部開発タグ
  • ある種のフォーム入力
  • JQuery (2.1 でテスト済み)

手順:

  1. 「ラッパー」div を作成する
  2. 内側の「ボタン」div を作成する
  3. 内側の「ボタン」divの下にフォーム要素を配置します
  4. 「ラッパー」と「内側」の div を同じサイズに設定します
  5. overflow:hiddenラッパーにセット
  6. オンクリック機能を設定する「内部」div 用の JQuery スクリプトを作成します。
  7. .click()「内部」関数で、入力の関数呼び出しをクリックします

IE 10で動作するようです。

$(document).ready(
    function()
    {
        $("#open_dialog").on("click",function()
                                {
                                    $("input").click();
                                });
        $("input").on("change",function()
                      {
                          alert($("input"));
                          $("#notice").html("uploading");
                      });
    });
#open_dialog
{
    position: relative;
    width: 200px;
    height: 50px;
    color: white;
    font-family: "Arial";
    font-size: 14pt;
    text-align: center;
    top: 25px;
    margin-top: -.5em;
    z-index: 1;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    background: green;
    z-index: 0;
}
input
{
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="open_dialog">Click Me</div>
    <input type="file" />
</div>
<div id="notice">Nothing to upload</div>

于 2013-06-19T20:02:22.833 に答える
0

さまざまなソリューションを組み合わせて、(すべてのブラウザーで) 自分に合ったソリューションを取得しました。LESS ネスティングを使用して記述されています。

HTML

<!--/* Upload input */-->
<div class="input-file">
  Select image
  <input type="file" />
</div>

少ないCSS

/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
  position: relative;
  overflow: hidden;
  margin: 10px;

  input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 10000px;
  }

  // For Chrome
  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }
}
于 2015-05-09T09:05:02.303 に答える
0

別のより簡単な解決策を見つけました。この要素に対してのみ、マウスダウンでイベント「クリック」をトリガーするだけです。

$("input").mousedown(function() {
    $(this).trigger('click');
})

他のブラウザでの問題を回避するには、この解決策を IE のみに適用してください。

if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
    $("#your_file_input").mousedown(function(event) {
        if (event.which == 1) {
            $(this).trigger('click');
        }
    })
}

これが変更されたjfiddleです。IE 9-10で確認してください： http://jsfiddle.net/7Lq3k/

編集：左クリックのみのイベント処理を制限するために変更された例（詳細については、jQueryでマウスの左クリックと右クリックを区別する方法を参照）

于 2014-07-15T16:28:15.790 に答える