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

プログラミング

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

スポンサーリンク

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

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

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

Drag and Drop File Browser

Drag and Drop File Browser - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

 

File Selection, Drag & Drop

File Selection, Drag & Drop, ... - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

 

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

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

 

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

how to get fullpath of dropped folder from file system
I am trying to implement drag n drop in my application, which need the full path of folder being dropped. I have done something like this <html> <hea...

 

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.

 

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

 

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

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

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

 

Drag and Drop and Automatically Send to the Server | HTML5 Doctor

 

英文

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.

 

日本語訳

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

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

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

 

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

 

プログラミング
スポンサーリンク
スポンサーリンク
うらしたをフォローする
スポンサーリンク
urashita.com 浦下.com (ウラシタドットコム)

コメント

タイトルとURLをコピーしました