4

次のことを達成するために、この jQuery + html を「作成」しました。

ユーザーがクリックできるプレースホルダー画像があり、ファイル選択ダイアログが開きます。ファイルが選択されると、対応するマルチパート フォームがサーバーにアップロードされます。このファイルのアップロードで AJAX の動作を模倣しようとしているので、サーバーの応答を受信するために非表示の iframe も使用しています。

問題を説明しやすいように、最初にコードを示します。

jQuery("#myInput").change(function () {  // Submit form upon file selection
   // alert("myInput.val() = " + $('#myInput').val());  // alert 1
    $('#form1').submit();
   // alert("myInput.val() = " + $('#myInput').val());  // alert 2
});

<form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
<input id="myInput" type="file" name="userfile" /><br>
</form>
<img src="/img/placeholder.png" onclick="$('#myInput').click();" >

<iframe id="target_frame" name="target_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

コードは、新しい Chrome/Firefox/Safari で完全に動作します。visibility: hidden;(興味深いことに、 をオンにしても機能しmyInputます。したがって、セキュリティ上の懸念はあまりないようです)。ただし、IE 9 と 10 はどちらも同じ動作を示します。画像をクリックするとダイアログが正常に表示され、ファイル パスは「アラート 1」では正しく設定されていますが、「アラート 2」では設定されておらず、フォームが送信されません。 . 一方、参照ボタンを直接クリックすると、myInput適切にダイアログが表示され、フォームが送信されます。

この動作がどのように可能になるのか、私は完全に混乱しています! 迷惑なIEを撃退する方法についての提案は大歓迎です:)

4

2 に答える 2

0

透明なファイル要素を画像の上に重ねる方法を採用することにしました。私のインスピレーションはこのページから得ました: https://coderwall.com/p/uer3ow . 必要な HTML と CSS は次のとおりです。

.file_loader {
    position: relative;
    overflow: hidden;
    border: solid gray 1px;
    margin: auto;
    width: 300px;
    height: 400px;  
}

.file_loader .hidden_file {
    display: block;
    background: white;
    font-size: 80px;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.placeholder {
    height: 100%;
    width: 100%;
}

<div class="file_loader">
    <img src="/img/placeholder.png" id="placeholder1" class="placeholder" >
    <form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
    <input id="myInput" class="hidden_file" type="file" name="userfile" /><br>
    </form>
</div>

ご覧のとおり、「file_loader」クラスの高さと幅によって、プレースホルダー イメージと透明な input=file 要素オーバーレイのサイズが強制されます。この CSS には本当に素晴らしいものが 1 つあります。それはそのリンクから来ています。ファイル要素に非常に大きなフォントサイズを設定することについて話しています。これは IE で機能させるための鍵となります。なぜなら、[参照] ボタンが非常に大きくなり、プレースホルダー全体が埋まってしまうからです。font-size を変更しないと、IE では画像の一部だけがファイル ダイアログを表示できるようになります (残りは透明なテキスト フィールドになります)。Chrome/Firefox/Safari では、ファイル要素全体をクリックできるため、このフォントサイズのトリックは不要であることを指摘しておきます。

于 2013-10-09T04:00:22.260 に答える