ChromeとFirefoxとSafariは、ブラウザの「ファイルを選択」ボタンへファイルをドラッグ＆ドロップできる

恥ずかしながら、最近気付きました。

inputタグでTypeを「type="file"」と指定するとブラウザに表示される「ファイルを選択」のボタン。これをクリックするとアップロードするファイルを選択するダイアログが出てきます。普通はここから、アップするファイルのある階層を指定して、ポチッと選びますよね。

でも、このボタンのところへ、アップするファイルを直接ドラッグ＆ドロップすると、Chrome・Firefox・Safariでは、ブラウザで表示されずに、アップロードファイルとして指定することができます。
　

ちなみに、確かめてみたところ、Internet Explorer 8、9、Operaでは非対応。大方の予想通り、ブラウザのウインドウで画像を表示してしまいます。

また、Macでも同様の結果（ChromeとFirefoxとSafariでは可能）でした。「ボタンを押して、ファイルを選択する」動作を「ドラッグ＆ドロップ」へと、たった一手間ではありますが、たくさんアップロードするときや、デスクトップに見えているファイルをアップするときにお試しください。

（常山剛）
　

あわせて読みたい