web-dev-qa-db-ja.com

javascript / jqueryを使用したトリガーファイルアップロードダイアログ

<input type="file">を使用する代わりに、<input type="text">を使用してから、javascriptまたはjqueryを使用してスクリプトを作成し、テキストボックスをクリックするとファイルアップロードダイアログが表示されるようにすることは可能ですか？フォームに送信されたときに実際にアップロードされました）

javascriptjqueryhtmlfile-uploadtextbox
33
kamikaze_pilot

あなたはこのようなことを意味しますか？

http://jsfiddle.net/CSvjw/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    $('input[type=text]').val($(this).val());
});

ただし、ファイル入力で指定された値はセキュリティ上の理由で偽物であることに注意してください。ファイル名だけを表示したい場合は、スラッシュを削除できます。

文字列分割と配列ポップを使用してそれを行う方法の例を次に示します。

http://jsfiddle.net/CSvjw/1/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';

    $('input[type=text]').val(val);
});

これをさらに調整して、ディレクトリセパレータとしてスラッシュを使用するシステムを考慮することができます。また、これを行うと、ユーザーがコンピューターからファイルを直接ファイル入力にドラッグできる多くの最新ブラウザーの機能が失われることに注意することも重要です。私があなただったら、テキスト入力をそうでないものに変えようとするのではなく、ファイル入力をスタイリングすることでそのパラダイムを受け入れます。

84
treeface

そして、HTMLコードに以下のような同じ複数の入力がある場合：-

<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>​​​​​​​​​​​​​​​​​​​​​

@treefaceの答えを展開すると、Jqueryコード（現在のバージョン1.8.0）は次のようになります。

$('input[type=text]').click(function() {
    $(this).parent(".item")
        .find('input[type=file]')
        .trigger('click');
});

$('input[type=file]').change(function() {
    $(this).parent(".item")
        .find('input[type=text]')
        .val($(this).val());
});​

JQueryの$ parents（）と$ parent（）の間に注意してください。試してみてください@ http://jsfiddle.net/afxDC/

8
Alvin K.

最初にcssでdisplay:noneまたはvisibility:hiddenを使用しないでください

Jquery：

$(document).ready(function() {
 $('#file').hide(); 
 $("#elementToBeClicked").click(function(){
   $('#file').click();
 });
});
6
Raghav

セキュリティ上の理由により、これを実行できないのではないかと疑っています。ユーザーの同意なしに特定のファイルをユーザーのコンピューターからプルすることはできないため、ファイルアップロード要素のvalue属性を設定しようとしてしばらく前に思い出したようです。これは、テキストフィールドの値を追加するファイルに設定し、そのタイプをアップロード要素に変更してフォームを送信できるので、テキストボックスをファイルアップロード要素にプログラムで変更することに拡張されると思います。

あなたはJavascriptの制限内で作業していると思うだろうが、ネイティブJSでそれを行うことができない場合、JQueryを使用することはまずないだろうと思うだろうが、試してみるのは十分に簡単なはずです。

これが理にかなっていることを願って、

JLove

2
JLove

入力テキストをjquery/javascript関数にバインドして、コードでファイル入力を作成し、ユーザーがファイルをアップロードできるようにすると思います

<input type="text" onclick="upload"/>
 jquery
 function upload(){
   $('[input type='text']').append('<input type="file"/>')
0
zedecliff