<input type="file">プログラムでタグに対してクリックイベントを発生させたいのですが。

click（）を呼び出しただけでは何も実行されないか、少なくともファイル選択ダイアログがポップアップされません。

私はリスナーを使用してイベントをキャプチャし、イベントをリダイレクトする実験をしてきましたが、誰かがクリックしたように実際にイベントを実行することはできませんでした。

すべてのブラウザでこれを行うことはできません。IE では許可されていますが、MozillaとOpera では許可されていません。

GMailでメッセージを作成する場合、「ファイル添付」機能は、IEとこれをサポートするすべてのブラウザーに実装され、Firefoxとそうでないブラウザーに別の方法で実装されます。

なぜそれができないのかはわかりませんが、セキュリティリスクであり、どのブラウザーでも許可されていないことの1つは、プログラムでHTML File要素にファイル名を設定することです。

私はこの一日の解決策を探していました。そして、これらは私が作った結論です：

1. セキュリティ上の理由から、OperaとFirefoxはファイル入力のトリガーを許可していません。
2. 唯一の便利な代替手段は、「隠された」ファイル入力を作成し（「隠された」または「表示：なし」ではなく、不透明度を使用する）、その後、その「下」にボタンを作成することです。このようにボタンが表示されますが、ユーザーがクリックすると、実際にファイル入力がアクティブになります。

お役に立てれば！:)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

どのブラウザでもclick（）を起動できますが、一部のブラウザでは、要素を表示してフォーカスする必要があります。jQueryの例を次に示します。

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

それは前に非表示で機能しclick()ますが、showメソッドを呼び出さずに機能するかどうかはわかりません。これをOperaで試したことはありません。IE/ FF / Safari / Chromeでテストしましたが、動作します。これがお役に立てば幸いです。

これは可能です：FF4 +、Opera？、Chromeでは：

1. inputElement.click()ユーザーアクションコンテキストから呼び出す必要があります！（スクリプト実行コンテキストではありません）

2. <input type="file" />可視にする必要があります（inputElement.style.display !== 'none'）（可視性などで非表示にできますが、 "display"プロパティは不可）

リンクの上に非表示のフォームをオーバーレイする必要があることを理解しているが、書くのが面倒なので、私はあなたのためにそれを書きました。まあ、私にとっては、共有することもできます。コメントは大歓迎です。

HTML（どこか）：

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML（気にならないところ）：

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript：

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

この解決策を試してください：http : //code.google.com/p/upload-at-click/

ラベルタグを使用するだけで、入力を非表示にして、関連するラベルで機能させることができ ますhttps://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

このclickメソッドをChrome、Firefoxなどで機能させる場合は、入力ファイルに次のスタイルを適用します。それは完全に隠されます、あなたがするようなものですdisplay: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

それはとても簡単です、私はそれが機能することをテストしました！

$(document).one('mousemove', function() { $(element).trigger('click') } );

私が同じような問題に遭遇したときに私のために働いた、それは通常のeRube Goldbergです。

ワーキングソリューション

この古い記事に、私が使用していた実用的なソリューションを追加します。これは、新旧両方のすべてのブラウザーのおそらく80％以上で機能します。

ソリューションは複雑ですがシンプルです。最初のステップは、CSSを利用し、不透明度が0であることを示す「アンダーエレメント」で入力ファイルタイプを偽装することです。次のステップは、JavaScriptを使用して必要に応じてラベルを更新することです。

HTML _{特定の要素にすばやくアクセスする方法が必要な場合は、IDを挿入するだけですが、このプロセス全体を設定するCSSに関連しているため、クラスは必須です。}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{覚えておいてください。カラーリングやフォントスタイルなどは完全に好みです。この基本的なCSSを使用する場合、いつでも好きなようにスタイルにアフターエンドマークアップを使用できます。これは最後にリストされているjsFiddleに表示されます。}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript _{純粋で真実ですが、一部の古い（廃止された）ブラウザーはまだ問題を抱えている可能性があります（Netscrape 2など）。}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

jsFiddleの例

できます ：

FirefoxとOperaのセキュリティ上の理由から、ファイル入力のクリックを起動することはできませんが、MouseEventsでシミュレートできます。

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

私はこれが古いことを知っており、これらのすべてのソリューションはブラウザのセキュリティ対策を真の価値でハックするものです。

とはいえ、現在のところ、fileInput.click（）は現在のChrome（36.0.1985.125 m）と現在のFirefox ESR（24.7.0）では機能しますが、現在のIE（11.0.9600.17207）では機能しません。ボタンの上に不透明度0のファイルフィールドをオーバーレイすることは機能しますが、目に見えるトリガーとしてリンク要素が必要でしたが、ホバーの下線はどのブラウザーでも機能しません。点滅して消えると、おそらくブラウザがホバースタイリングが実際に適用されるかどうかを考えます。

しかし、私はそれらすべてのブラウザで機能する解決策を見つけました。私はすべてのブラウザのすべてのバージョンをテストしたと主張したり、それが永久に機能し続けることを知っているとは主張しませんが、私のニーズを満たしているようです。

それは簡単です：ファイル入力フィールドを画面外（位置：絶対;上：-5000px）に配置し、その周りにラベル要素を配置して、ファイルフィールド自体ではなく、ラベルのクリックをトリガーします。

リンクはスクリプトでラベルのクリックメソッドを呼び出す必要があることに注意してください。ラベル要素内のテキストをクリックするときのように、リンクは自動的に実行されません。どうやらlink要素はクリックを捕捉し、それがラベルに到達しない。

フィールドが画面外にあるため、これは現在選択されているファイルを表示する方法を提供しないことにも注意してください。ファイルが選択されたらすぐに送信したかったので問題ありませんが、状況が異なる場合は多少異なるアプローチが必要になります。

JSフィドル：http : //jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

このコードは私にとってはうまくいきます。これはあなたがやろうとしていることですか？

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

jQueryとjQuery-uiを使用したSafariの私のソリューション：

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

この問題に対する純粋なJavaScriptソリューションを次に示します。すべてのブラウザで正常に動作します

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

イベントをコントロールにリダイレクトする方法はいくつかありますが、ブラウザーが（良い）セキュリティ上の理由でそれをブロックしようとするため、イベントを自分で簡単に起動コントロールに起動できるとは思わないでください。

ユーザーが何かをクリックしたときにファイルダイアログだけが表示されるようにしたい場合は、ファイルアップロードボタンの見栄えをよくしたい場合は、Shaun Inmanが考案したものを確認することをお勧めします。

キーダウン、キープレス、キーアップの各イベント間で、コントロールの内外でフォーカスをクリエイティブにシフトすることで、キーボードトリガーを実現できました。YMMV。

これはブラウザの非互換性の問題の世界なので、これをそのままにしておくことをお勧めします。マイナーなブラウザー更新も警告なしにトリックをブロックする可能性があり、機能を維持するにはハックを再発明し続ける必要がある場合があります。

ファイルダイアログを開いてすぐにアップロードを開始するカスタムボタンを作成したかったので、これについて少し前に調査しました。私はこれを可能にするかもしれない何かに気づきました-アップロードのどこかをクリックするとFirefoxがダイアログを開くようです。したがって、次のようにするとよいでしょう。

1. ファイルのアップロードと、ボタンとして使用する画像を含む個別の要素を作成します
2. それらを重ねて配置し、ファイル要素の背景と境界を透明にして、ボタンだけが見えるようにします
3. ボタン/ファイル入力がクリックされたときにIEがダイアログを開くようにJavaScriptを追加します
4. onchangeイベントを使用して、ファイルが選択されたときにフォームを送信する

私はすでに問題を解決するために別の方法を使用したので、これは理論上のものですが、うまくいくかもしれません。

私が持っていた<input type="button">視界から隠されたタグを。私がやったことは"onClick"、ラベルなど、あらゆるタイプの可視コンポーネントにイベントを。これは、右クリックの「HTMLの編集」コマンドを使用して、Google Chromeの開発者ツールまたはMozilla FirefoxのFirebugを使用して行われました。このイベントでは、次のスクリプトまたは同様のものを指定します。

JQueryがある場合：

$('#id_of_component').click();

そうでない場合：

document.getElementById('id_of_component').click();

ありがとう。

こんにちは、このソリューションは機能します。ダウンロードにはMSBLOBを使用する必要があります

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

AngularJSの場合、または通常のJavaScriptの場合でも。

これはFirefox 4で可能になり、ポップアップウィンドウとしてカウントされるため、ポップアップウィンドウがブロックされた場合は常にブロックされます。

ここに私のために働く解決策があります： CSS：

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

「小さな」JQueryヘルプ付きのHTML：

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

マスクされたフィールドは、本当のアップロードフィールドで強制的にカバーされていることを確認してください。

<a>タグの[ファイルを開く]ダイアログボックスからの回答に従ってこれを行うことができます

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

input（file）がフォームの外にある場合、クリックイベントを起動するとファイルダイアログが呼び出されることがわかりました。

うまくいけば、これは誰かを助ける-私はそれに頭を叩いて2時間費やした：

IE8またはIE9では、JavaScriptを使用してファイル入力を開くようにトリガーした場合（私はすべて試したことがあると思います）、JavaScriptを使用してフォームを送信することはできず、黙って失敗します。

通常の送信ボタンを使用してフォームを送信することはできますが、form.submit（）を呼び出します。静かに失敗します。

機能する透過的なファイル入力でファイル選択ボタンをオーバーレイすることに頼らなければなりませんでした。

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

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

それは不可能ではありません：

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

しかし、どういうわけか、これがクリックイベントを介して呼び出された関数内にある場合にのみ機能します。

したがって、次の設定がある可能性があります。

html：

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript：

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

使用できます

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>