jQueryトリガーファイルの入力

163

jQueryを使用してアップロードボックス（参照ボタン）をトリガーしようとしています。
私が今試した方法は： 

$('#fileinput').trigger('click');

しかし、それは機能していないようです。助けてください。ありがとうございました。

javascript  jquery  css 
— アレック・スマート
ソース
代わりにこのようなものを試すことができます。
— キルタン
19
これを行う方法はありませんか？なんて憂鬱。
— マーカス・ダウニング
本当に落ち込んでいて、それは真剣に「クリック」によって引き起こされますか？私はFlash / AS3を非常に好みます。そのタイトなAPIと、ユーザーが開始した入力イベントハンドラーからのFileReference.browseの呼び出しのみを許可する強力なセキュリティモデルを備えています。さらに、HTMLファイルの入力は醜く、スタイルを設定できません（これは単なる入力タグであり、コンテンツとスタイルを分離するためのものです）。クリックイベントによってアクティブ化される新しい「参照」ボタンを作成する必要があります...クリックとしてファイル入力に転送する必要があります...これは、要素の配置とイベントの委任の特異性に応じて、無限再帰を引き起こす可能性があります。
— Triynko 2015年
残念ながら、Flashを使用することは、セキュリティの問題やコンテンツブロッカーの増加により、ますます実用性が低下しています。
— Tim

回答:

195

これはセキュリティ上の制限によるものです。

セキュリティ制限は、<input type="file"/>がdisplay:none;またはに設定されている場合のみであることがわかりましたvisbilty:hidden。

設定することで、ビューポートの外側で位置決めしようとした私はそうposition:absoluteとtop:-100px;、それが動作しますほら。

http://jsfiddle.net/DSARd/1/を参照してください

それをハックと呼びます。

うまくいきますように。

— adardesign
ソース
4
ff 3.6では機能しません。クロームでも動作しますが、
— IE
4
msdnのセキュリティ制限に関するドキュメントはありますか？
— eomeroff
2
よく働く。いずれにせよ、私はより安全な設定だと思いますleft: -100px;。ページの長さがどれほどかはわかりません
— Alter Lagos
+1これが本当の答えです（そして良い解決策です）。これが明示的に述べられているドキュメントへのリンクがありますか？
— kontur
9
また、不透明度を0に設定することもできます
— Stuart
109

これは私のために働きました：

JS：

$('#fileinput').trigger('click');

HTML：

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS：

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>>クロスブラウザーで機能する別のもの：<<<

アイデアは、カスタムボタンの上に非表示の巨大な「参照」ボタンをオーバーレイすることです。したがって、ユーザーがカスタムボタンをクリックすると、実際にはネイティブ入力フィールドの[参照]ボタンをクリックします。

JSフィドル：http : //jsfiddle.net/5Rh7b/

HTML：

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS：

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript：

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});
— そり
ソース
ボタンの幅を広くすると、IE9 / 10では非表示のアップロードボタンが右ボタンと左テキストフィールドで構成されるという欠点が1つあります。これをダブルクリックする必要があります。この場合、font-sizeを100pxよりも大きく設定してみてください。
— 雲仙14
これは、しかしでもクロム53で動作heightへの変更を提案しているheight: 100%
— ラプター
2つ目はiOSのSafariでも機能します。非常に素晴らしい！
— Jannis
71

LABEL要素exを使用できます。

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>
スニペットを展開

これにより、入力ファイルがトリガーされます

— ジョン・レイ
ソース
5
なぜこれは受け入れられない答えですか？ファンキーなJavaScriptを必要としない最も簡単な方法です。
— tomitrescak 2016
@tomitrescak OPは、最良の回答を得るのを待っていません。
— Mahi
9
回答は質問が送信されてから7年後に投稿されたことに注意してください。
1
2018年もベストアンサーです。
— masoomyf 2018
1
2019年もベストアンサー;）
— ギョームポティエ
17

私はそれをIE8 +、最近のFFとクロムで動作させています（=テスト済み）：

$('#uploadInput').focus().trigger('click');

キーはクリックを発動する前に焦点を合わせています（そうでない場合、クロムはそれを無視します）。

注：入力を表示および表示する必要があります（in、not display:none、notなどvisibility:hidden）。（他の多くの人がそうであるように）入力を絶対的に配置し、画面から外すことをお勧めします。

#uploadInput {
    position: absolute;
    left: -9999px;
}
— 強大なゴム製のアヒル
ソース
1
+1。また、ファイル入力ボタンではなく、周囲の要素を非表示にして、周囲の要素を表示し、ボタンをフォーカスしてアクティブにし、ボタンを非表示にできることにも気付きました。
— Stevo、2012年
10

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

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}
<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>
スニペットを展開

— モハン
ソース
9

adardesignは、ファイル入力要素が非表示の場合に無視されることに関して、それを釘付けにしました。また、多くの人が要素のサイズを0にシフトしたり、配置やオーバーフローの調整によって要素を範囲外に押し出していることに気づきました。これらはすべて素晴らしいアイデアです。
完全にうまく機能しているように見えるもう1つの方法は、不透明度を0に設定することです。次に、位置を設定するだけで、非表示のように他の要素をオフセットしないようにすることができます。要素をあらゆる方向に10Kピクセル近くシフトすることは少し不必要に思えます。

これが欲しい人のための小さな例です：

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}
— アイグロプラム
ソース
7

好奇心のために、アップロードフォームと入力ファイルをDOMツリーに追加せずに動的に作成することで、好きなことを実行できます。

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

DOMにuploadFormを追加する必要はありません。

— ジャイルハンベルト
ソース
1
ありがとうございました！私はこれを20分間探していました！
— ラボ
5

正しいコード：

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>
— E9システマ
ソース
4

実際、私はこのための本当に簡単な方法を見つけました。

$('#fileinput').show().trigger('click').hide();

このようにして、ファイル入力フィールドのcssプロパティをどれにも表示せずに、トレードに勝つことができます:)

— skywlkr
ソース
遅いマシンでは画面がちらつくことがあります。最適なソリューションではない
— ドミトリーエフィメンコ2013年
4

答えるのは遅すぎますが、この最小限の設定が最もうまく機能すると思います。私も同じことを探しています。

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

ブートストラップファイル入力ボタンのデモ

— ナトワール・シン
ソース
回答が遅くなることはありません;）
— AGuyCalledGerald 14年
数年後、依然としてIMOの最良の回答
— DimmuR 2017
4

これは非常に古い質問ですが、残念ながらこの問題は依然として関連しており、解決策が必要です。

私が思いついた（驚くほど簡単な）解決策は、実際のファイル入力フィールドを「非表示」にし、LABELタグでラップすることです（拡張のために、BootstrapとHTML5に基づくことができます）。

See here:ここにサンプルコード

このようにして、実際のファイル入力フィールドは非表示になり、実際に変更されたLABEL要素であるカスタマイズされた「ボタン」だけが表示されます。このLABEL要素をクリックすると、ファイルを選択するウィンドウが表示され、選択したファイルが実際のファイル入力フィールドに移動します。

さらに、必要に応じて外観と動作を操作できます（たとえば、選択したファイルの名前をファイル入力ファイルから取得し、選択した後、どこかに表示します。LABEL要素は自動的には行いませんが、もちろん、私は通常、テキストコンテンツとしてLABELの中に入れます。

しかし注意してください！これの外観と動作の操作は、想像したり考えたりできるものに限定されます。;-) ;-)

— TheCuBeMan
ソース
3

単純な$（...）。click（）;で管理しました。JQuery 1.6.1

— バレンティン・ガレア
ソース
1
私のWebサイト（www.iscriptdesign.com）では、$（ 'file：input'）。click（）を実行しても何も実行されず、$（ 'file：input'）。trigger（ 'も実行されません。クリック'）;
— ジェリー博士
以下に完全な例を示します。<input type = "file" id = "picBrowse" ...次に$（ '＃picBrowse'）。click（）;
— Valentin Galea 2011年
私はMac OSのcr（バージョンがわからない）でテストしましたが、XPのFF 4でも動作します。ありがとう！
— ジェリー博士
2

<input type="file"/>偽のボタンを使用してそれをトリガーするときにカスタムクライアント側の検証に問題があり、@ Guillaume Bodiのソリューションが（Chromeでもopacity: 0;）機能しました

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

アップロード入力のCSSスタイル 

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}
— アミンK
ソース
1

これを試してください、それはハックです。Position：absoluteはChrome用で、trigger（ 'change'）はIE用です。

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});
— Thinpiglin
ソース
$.browserjQueryの新しいバージョンでは推奨されないことに注意してください
— Kevin Beal 2013
1

私の問題はiOS 7では少し異なりました。FastClickが問題を引き起こしていることがわかりました。class="needsclick"ボタンを追加するだけで済みました。

— Dex
ソース
0

クロスブラウザの問題を念頭に置いて、これがおそらく最良の答えです。

CSS：

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS：

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML：

<a class="file-upload">Upload</a>
<input type="file" name="file">
— Eddsters
ソース
0

同様の問題があるので、あなたの問題は理解できたと思います。したがって、タグ<label>には属性があります。この属性を使用して、入力をtype = "file"にリンクできます。しかし、レイアウトのルールがあるためにこのラベルを使用してこれをアクティブにしたくない場合は、次のようにすることができます。

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});
.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>
スニペットを展開

もちろん、これを自分の目的とレイアウトに合わせて調整しますが、それは私がそれを機能させるためのより簡単な方法です!!

— レオナルドリンドロス
ソース
-1

ギヨーム・ボディの答えに基づいて、私はこれを行いました：

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

つまり、最初は非表示になっていて、トリガーに対して表示され、その後すぐに非表示になります。

— ステボ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.