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.

 

日本語訳

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

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

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

 

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

 

JavaScriptの関連記事

JavaScriptの関連記事をまとめてみました。

 

↓JavaScriptとPHPで変数を渡す方法

https://urashita.com/archives/17619

 

↓ツリー表示をするためのJavaScriptのライブラリ

https://urashita.com/archives/28336

 

 

コメント