【jQuery】input type fileを別要素クリックで開く方法

inputタグのtype="file"を別要素をクリックで開く方法

こんにちは。

UVERworld布教クリエイターのゆうや(@yuyaphotograph)です!

本記事では、inputタグのtype=”file”を別要素をクリックで開く方法を紹介します。

任意のdivタグをクリックした時にinputタグのtype=”file”をクリックしたことにして開かせたい方向けです。

それでは見て参りましょう!

inputのfileを任意の要素クリックで開けるようになろう!

うまく動作しなかった方法

今回の実装をする上でうまく動作しなかった方法をまず紹介します。

普通に、

任意の要素をクリックしたらjqueryのclickメソッドでinput fileをクリックさせる

という処理を書いて、その後に

「input fileでファイルがアップロードされた時の処理」

を書いたのですが、それだとjavascriptのエラーが出てうんともすんとも言わなかったのです笑

以下、その時のコードです。

index.js
// 任意の要素クリックでinput fileクリックさせる
$(".hogehoge").on('click', function(){
  $("input[type='file']").click();
});

// input fileでアップロードされたら行う処理
$("input[type='file']").on('change',function(){
  var file = $(this).prop('files')[0];
  if(!($(".filename").length)){
    $(".hogehoge").append('<span class="filename"></span>');
  }
  $("#file-label").addClass('changed');
  $(".filename").html(file.name);
});

うまく動作した方法

上記のコードに以下のような工夫を施すと期待通りの動作をするようになりました。

  • 「任意の要素クリックした時」の処理の中に処理を書くよう変更
  • input fileをクリックした時にstopPropagation
  • その後に、jqueryのclickメソッドでinput fileをクリックさせる
  • 最後にinpu fileでアップロードされた時の処理を書く

上記のように修正したコードは以下になります。

index.js
$(".hogehoge").on('click', function(){
  $("input[type='file']").on('click', function(e){
    e.stopPropagation();
  });
  $("input[type='file']").click();
  $("input[type='file']").on('change',function(){
    var file = $(this).prop('files')[0];
    if(!($(".filename").length)){
      $(".hogehoge").append('<span class="filename"></span>');
    }
    $("#file-label").addClass('changed');
    $(".filename").html(file.name);
  });
});

サンプルコード

See the Pen
xxGwQeJ
by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、inputタグのtype=”file”を別要素をクリックで開く方法をご紹介しました。

処理の順番とかどこに処理を書くのかってけっこうエラーの原因になるので注意が必要ですね。

最後までご高覧いただきありがとうございました!

あわせて読みたい

続きを読むボタンをCSSとjQueryで作る方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です