JavaScriptでドラッグアンドドロップして自動でファイルをサーバーへ送信

プログラミング

2019.06.292019.06.14

JavaScriptでドラッグアンドドロップしてから、自動でファイルをサーバーへ送信する方法をまとめてみました。

JavaScript ドラッグ＆ドロップのサンプルプログラム
ドラッグ＆ドロップでフルパスのファイル名を取得できるか？
ドラッグ＆ドロップして自動でサーバーにファイルを送る
JavaScriptの関連記事

JavaScript ドラッグ＆ドロップのサンプルプログラム

JavaScript ドラッグ＆ドロップについては、よいサンプルプログラムがネットにいっぱい上がっている。

参考にするとよいだろう。

↓Drag and Drop File Browser

・http://jsfiddle.net/dshahin/be20oetu/

↓File Selection, Drag & Drop

・http://jsfiddle.net/tohan/jtaevhoj/

ドラッグ＆ドロップでフルパスのファイル名を取得できるか？

JavaScriptでドラッグ＆ドロップのプログラムを作っていてよくある質問として、フルパスのファイル名を取得できるか？というのがある。

以下に質問と回答があるが。。。

・https://stackoverflow.com/questions/35218632/how-to-get-fullpath-of-dropped-folder-from-file-system

Does javascript allow access to local file system?###

Short anwser: no.

So how to get the fullpath of a dropped folder?

It's easy, all you need to do is get the dropped item as a file.

What does it change?

In your code above you have e.dataTransfer.items[i].webkitGetAsEntry().

The webkitGetAsEntry() method is really useful as it returns an ''Entry'' object. You can do cool stuffs like, for instance:

Check if the entry is a file or a directory.

いや、でもこの方法でも多分出来ないぞ。。

ドラッグ＆ドロップして自動でサーバーにファイルを送る

ドラッグ＆ドロップして自動でサーバーにファイルを送る。

これは、とても良いサンプルです。

・http://html5doctor.com/drag-and-drop-to-server/

英文

I realised (when looking myself) that there are a lot of demos and tutorials that show you how to drag-and-drop a file into the browser and then render it on the page.

They're often labelled as "drag-and-drop and upload", but they actually don't upload. This tutorial will take you that final step.

日本語訳

ファイルをブラウザにどうやってドラッグ＆ドロップして、その後、ページにプレビューするかを説明するデモやチュートリアルは山ほどあるのが分かりました。

それらは、しばしば「ドラッグ＆ドロップしてアップロード」と称しているが、実はアップロードしていません。

このチュートリアルでは、その最終ステップをご案内します。

これこそ、まさにドラッグ＆ドロップで欲しいものです。