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

こんにちは。

ゆうや（@yuyaphotograph）です！

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

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

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

inputの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”を別要素をクリックで開く方法をご紹介しました。

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

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