web-dev-qa-db-ja.com

JavaScriptでファイルを開くダイアログボックス

divをクリックしながらHTMLでファイルを開くダイアログを表示するソリューションが必要です。 divをクリックすると、ファイルを開くダイアログボックスが開く必要があります。

入力ファイルボックスをHTMLページの一部として表示したくありません。 Webページの一部ではない別のダイアログに表示する必要があります。

javascriptfiledialog
89
ArK

いいね

Fine Uploaderデモ

それは<input type='file' />コントロールそのものです。ただし、その上にdivを配置し、CSSスタイルを適用してその感触を得ます。ファイルコントロールの不透明度は0に設定されているため、divをクリックするとダイアログウィンドウが開きます。

47
rahul
    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

IEの場合、これを追加します：

$("#logo").css('filter','alpha(opacity = 0');
72
Somwang Souksavatd

なぜ誰もこれを指摘していない理由はわかりませんが、Javascriptを使用せずにこれを行う方法は次のとおりです。また、どのブラウザとも互換性があります。

編集：Safariでは、inputはdisplay: noneで非表示にすると無効になります。より良いアプローチは、position: fixed; top: -100emを使用することです。

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

希望する場合は、次のように、入力のforを指すlabelでidを使用して、"correct way"に移動できます。

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">
47
JP de la Torre

実際、不透明度、可視性、<input>スタイリングなどを備えたものは必要ありません。見てください：

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

jsFiddle のデモ。 Chrome 30.0およびFirefox 24.0でテスト済み。ただし、Opera 12.16では機能しませんでした。

35
Tigran Saluev

これが私にとって最適なものです（IE8、FF、Chrome、Safariでテスト済み）。

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}
<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

説明：クリックする要素のすぐ上にファイル入力を配置したので、クリックするとその要素またはそのラベルに到達します（ラベル自体をクリックしたかのようにアップロードダイアログが表示されます）。デフォルト入力のボタン部分がラベルの外側に突き出ているという問題があったため、入力のoverflow: hiddenとラベルのdisplay: inline-blockが必要でした。

14
Chris

クライアントマシンでJavaScriptがオフになっている場合はどうなりますか？すべてのシナリオで次のソリューションを使用します。 javascript/jQueryも必要ありません。 ：

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

説明：for="Your input Id"。 HTMLによりデフォルトでクリックイベントをトリガーします。そのため、デフォルトではクリックイベントがトリガーされ、jQuery/javascriptは不要です。 HTMLで単純に行う場合、なぜjQuery/jScriptを使用するのですか？クライアントがJSを無効にしたかどうかはわかりません。 JSがオフになっていても、機能は動作するはずです。

Working jsFiddle（JS、jqueryは必要ありません）

12
Pratik

最初にheadタグを追加します：

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

scriptタグが既にある場合は、上記の関数を追加してください。

bodyまたはformタグに以下を追加します：

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

あなたのhtmlのどこにいても、のようなものですOpenFileDialogクラスの新しいインスタンスをglobal変数として作成しました、その名前が要素のidである場合、コードまたはxamlのどこに関係なく、スクリプトまたはコードのbut彼の名前を入力して、プロパティを読み取ったり、関数を呼び出したりすることはできません。これは、要素input type = "file"で定義されていないグローバル関数があるからです。これらの関数に、OpenFileDialogインスタンスの名前である隠し入力type = "file"のIDを文字列として指定する必要があります。

HTMLにオープンファイルダイアログインスタンスを作成する際の作業を楽にするために、それを行う関数を作成できます。

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

また、ファイルを開くダイアログを削除する場合は、次の機能を作成して使用できます。

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

ただし、ファイルを開くダイアログを削除する前に、次の関数を作成および使用して、ダイアログが存在することを確認してください。

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

また、HTMLのbodyまたはformタグにファイルを開くダイアログを作成して追加したくない場合は、これは、非表示の入力type = "file" sを追加している場合、上記のcreate関数を使用してスクリプトで実行できます。

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

ボディまたはフォームタグの近くに、次を追加したことを確認します。

onload="yourBodyOrFormId_onload()"

すでに行っている場合は、上記の行を実行する必要はありません。

ヒント：まだ持っていない場合は、プロジェクトまたはWebサイトに新しいJScriptファイルを追加できます。このファイルでは、開いているすべてのファイルダイアログ機能をscriptタグとhtmlまたはwebフォームページ、およびこのJScriptファイルのhtmlまたはwebフォームページで使用しますが、htmlまたはwebフォームをリンクする前に忘れないでくださいもちろん、JScriptファイルへのページ。 JScriptファイルをheadタグ内のhtmlページにドラッグするだけで実行できます。ページが単純なhtmlではなくWebフォームであり、headタグがない場合は、動作できるように任意の場所に配置します。そのJScriptファイルでグローバル変数を定義することを忘れないでください。その値は、文字列としての本体またはフォームIDです。 JScriptファイルをHTMLまたはWebフォームページにリンクした後、フォーム本体のイベントをオンロードし、その変数の値を本体またはフォームIDに設定できます。次に、JScriptファイルでは、ドキュメントに1ページの本文またはフォームのIDをもう与える必要はなく、その変数の値を与えるだけです。その変数bodyIdまたはformIdまたはbodyOrFormIdまたは他の名前を呼び出すことができますあなたが欲しい。

頑張って！

10
user2133061

これに興味があるかもしれません： http://code.google.com/p/upload-at-click/

要素をクリックすると、「ファイルを開く」ダイアログが開きます。

カスタム関数を実行します。

4
Vitaly Fadeev

まだ<input type="file">要素が必要なので、 quirksmode のスタイルを使用してスタイルを整えることができます

3
Dan F

最も簡単な方法：

#fileInput {
  display: none;
}
<label for="fileInput">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="fileInput"/>

重要なのは、display: noneを使用すると、隠しファイルの入力で場所が占有されないようにすることです（opacity: 0を使用した場合）。

3
Karol Selak

<input type="file">を使用しない唯一の方法は、divに透明なFlashムービーを埋め込むことです。次に、ユーザーが生成したクリックイベント（Flash 10の新しいセキュリティルールに準拠）を使用して、Flashの FileReference.browse の呼び出しをトリガーできます。

quirksmode way に対する追加の依存関係を提供しますが、代わりに多くのイベント（組み込みの進行イベントなど）を取得します。

2
Martijn Laarman

使用してもよい

$('<input type="file" />').click()
0
Hamed Zakery Miab