私が持っているのは、隠しファイル入力とテキスト入力です。私が望むのは、テキスト入力をクリックしてフォーカスし、アップロードするファイルを選択して、選択したファイルのファイル名をテキスト入力に含めることです。ファイル入力でファイルが選択されたままになるため、フォームを使用してファイルを送信できます。
私が持っているスクリプトは、Chrome と Firefox ではうまく動作しますが、IE ではうまく動作しません (もちろん)。テキスト入力にフォーカスがあり、それをクリックすると、ファイル選択ウィンドウが 2 回開きます。実は、1つ目を閉じると2つ目が開きます。
これが私が今持っているスクリプトです:
$(function() {
$('input[type=text]').focus(function() {
$('input[type=file]').click();
});
$('input[type=text]').click(function() {
var $this = $(this);
if ($this.is(':focus')) {
$this.focus();
}
});
$('input[type=file]').change(function() {
var $this = $(this);
var filename = $this.val().replace(/\\/g, '/').split('/');
$('input[type=text]').val(filename[filename.length - 1]);
});
});
IE をチェックして$this.focus()
、クリック時に を呼び出さないようにしましたが、残念ながら失敗しました。代わりに、選択ウィンドウはまったく呼び出されませんでした。
ここで JSFiddle をセットアップしました: http://jsfiddle.net/Phally/g2vkb/
それを再現するには、Internet Explorer で Fiddle を開く必要があります (IE10 と IE10 で IE9 を装って試しました)。テキスト入力をクリックしてキャンセルします。これで、テキスト入力にフォーカスがあります。その後、もう一度クリックします。選択ウィンドウが開きます。ファイルを選択するかキャンセルして、それを閉じます。2 番目のウィンドウが表示されます。
問題は、IE が 2 つのファイル選択ウィンドウを開くのを止める方法を誰かが知っているかどうかです。前もって感謝します。