質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

7559閲覧

PHP ドラッグ&ドロップ ファイル取得方法

s.kono

総合スコア37

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/12/05 02:37

編集2016/12/09 00:05

HTML5のweb APIを利用し、ドラッグ&ドロップ方式でファイルをサーバーにuploadさせたいのですが、javascriptで取得したファイルオブジェクトをPHP側で処理する方法がわかりません。

具体的には以下のコードで
var files = event.dataTransfer.files;
のfilesをPHP側で受け取りたいのです。
formで「ファイル選択ボタン」からは$_FILES["file"]["tmp_name"]で取得できますが、javascriptを利用した場合どうやってサーバーにアップすれば良いか教えてください。jQueryやAWSなどは使いません。

また、ドロップされたファイル情報を取得できなくなるタイミングを教えてください。よろしくお願いします

追記:ajaxのurlの指定でフォームのポスト先ページを指定することで処理できることがわかり(合っていますでしょうか?)、だいぶコードを変えましたがコードは載せていません。ただurlに指定したページが呼ばれておらず処理が出来ていません。処理は成功したかのように終わります。

###URLで指定したページに処理が移らない原因を教えて下さい
→この件はブラウザのデバッカーでPHPページに処理が移っていることを確認でき、単純にサーバーのディレクトリパスが間違っていたためupされていなかっただけでした。汗、処理も成功していました。
自分の最終コードを載せたかったのですが少し時間がかかりそうなのでこの質問は閉じたいと思います。一番シンプルに解説されているサイトはここかなと思います。
http://piyopiyocs.blog115.fc2.com/blog-entry-809.html

まとめとしてはXMLHttpRequestを使った生コードを書くか、$.ajax(jQuery)を使わないと出来なかったんですね。勉強になりました。あと、urlで呼び出した処理はページ遷移せずに行われるので裏で行われているイメージで処理結果を表示するにはまた別な処理が必要になるんですね。

コード抜粋

var uploadURL ="upload.php"; $.ajax({ url: uploadURL, type: "POST", contentType:false, processData: false, cache: false, data: formData, success: function(data){ status.setProgress(100); $("#status1").append("File upload Done<br>"); } }); コード
// 参考 http://www.atmarkit.co.jp/ait/articles/1112/16/news135.html // http://vosegus.org/blog/2014/08/drop-file-upload.html //https://www.html5rocks.com/ja/tutorials/file/dndfiles/ if (is_uploaded_file($_FILES["file"]["tmp_name"])) { if (move_uploaded_file($_FILES["file"]["tmp_name"], "UpFiles/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . "をアップロードしました。"; } else { echo "ファイルをアップロードできません。"; } } else { echo "ファイルが選択されていません。"; } ?> <script> document.getElementById("droparea").addEventListener("drop", onDrop, false); // Drop領域にドロップした際のファイルのプロパティ情報読み取り処理 function onDrop(event) { // (1)ドロップされたファイルのfilesプロパティを参照 var files = event.dataTransfer.files; var disp = document.getElementById("disp"); disp.innerHTML = ""; for (var i = 0; i < files.length; i++) { var f = files[i]; // (2)ファイル名とサイズを表示 //disp.innerHTML += "ファイル名 :" + f.name + "ファイルの型:" + f.type + "ファイルサイズ:" + f.size / 1000 + " KB " + "<br />"; disp.innerHTML += "ファイル名 :<a href=''> " + f.name + "ファイルの型:" + f.type + "ファイルサイズ:" + f.size / 1000 + " KB " + "</a><br />"; } // (3)ブラウザ上でファイルを展開する挙動を抑止 event.preventDefault(); } function onDragOver(event) { // (4)ブラウザ上でファイルを展開する挙動を抑止 event.preventDefault(); } </script> <style> #droparea { background: #FFC; border: 2px dashed #CCC; height: 200px; line-height:200px; width:800px; text-align: center; color: #CCC; } </style> <section id="main"> <form action="" method="post" enctype="multipart/form-data"> <p>複数アップする時は一度にドロップして下さい</p> <div id="droparea" ondragover="onDragOver(event)" ondrop="onDrop(event)" >ここにアップロードするファイルをドロップして下さい。</div> <input type="file" name='upload' > <input type="submit" value="実行" name="upload"> </form> <p>ファイルプロパティ表示</p> <div id="disp" ></div> </section> コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

document.getElementById("droparea").addEventListener
してますが、その時点でdropareaが宣言されていないないので無効では?
window.onload=function(){}の中で処理するなり
document.addEventListenerしてidから抽出するなりの方法が一般的です

またドロップしたデータはinput fileで処理できないので
$_FILESで参照するのではなくajaxなど利用してバックグラウンドで
送り込んでやるのが妥当かと。

追記

調べました。以下でどうでしょう

  • 送り元(send.htm)

HTML

1<script src="js/jquery.js"></script> <!--適当に指定してください--> 2<script> 3$(function() { 4 $("#droppable") 5 .on("dragenter dragover",function(e){e.preventDefault();return false;}) 6 .on("drop", function(e){ 7 var file = e.originalEvent.dataTransfer.files[0]; 8 var fr = new FileReader(); 9 fr.onload = function(e) { 10 var fd = new FormData(); 11 fd.append("userfile", new Blob([e.target.result],{"type":file.type}),file.name ); 12 $.ajax({ 13 url:"recv.php", 14 type:"post", 15 data:fd, 16 dataType:"json", 17 processData: false, 18 contentType: false, 19 success:function(data){ 20 console.log(data); 21 }, 22 }); 23 }; 24 fr.readAsArrayBuffer(file); 25 e.preventDefault(); 26 return false; 27 }); 28}); 29</script> 30<div id="droppable" style="border: gray solid 1em; padding: 2em;"> 31ファイルをドロップしてください。 32</div>
  • 受け先:recv.php

PHP

1<?php 2//$_FILESで受けられる、あえて戻り値は返さなくてもいい 3print json_encode($_FILES["userfile"]); 4?>

投稿2016/12/05 03:00

編集2016/12/06 03:33
yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s.kono

2016/12/05 06:24

yambejpさん回答ありがとうございました。 PHPでサーバーにアップロードさせることは出来ないと言うことですね。 回答頂いてからずっと調べていますがajax等を利用してのUploadしたファイルをサーバーの特定のフォルダに保存させる(移動)方法がわかりません。いっそjQueryを使ってもと思い、そちらからも調べましたがドロップされたファイルオブジェクトを移動させるコード(javascript or jQuery)は単純なものではないのでしょうか?下のようなコードをよく見かけますが、urlに記述した場所に移動できるわけでないですね?引数から調べましたら省略すると呼び出したページになるとありました。もう少しヒントをいただけないでしょうか。よろしくお願いします。 $.ajax({ type: 'POST', contentType: false, processData: false, url: 'http://....', data: formData, dataType: 'json', success: function(data) { // メッセージ出したり、DOM構築したり。 }
yambejp

2016/12/06 03:34

わたしも若干思い違いがあったようで、追記のようにすれば、ドラッグアンドドロップしたファイルを$_FILESで受けることは可能です。参考にしてみてください
s.kono

2016/12/06 05:24

yambejpさんサンプルコード本当にありがとうございます。 不思議なんですがyambejpさんのサンプルコードも他のサイトのサンプルコード(いくつか見つけました)もきっとその方の環境だとちゃんと動作していると思うのですが私の環境ですとPHPページが呼び出されていないようなんです。javascript側では成功の処理に移るのですがPHPページのメッセージは表示されることはありません。イメージとしてはファイル情報が出力されるのですよね? PHPはver5.3.3ですがそれが問題かとも思いましたが5.2からは大丈夫みたいでした・・PHP.iniの設定で何かあるとか? その当たりは問題なさそうなのですが、もう少し自分でも調べてみます。
s.kono

2016/12/08 23:54

yambejpさんありがとうございました。おかげでひっかかっているところから脱出出来ました。最終的な結果は質問に追記しました。いつも単純なミスで動かないことが多く恥ずかしいです。でもはまったことで深く学習出来て帰かえってよかったと思います。それも回答くださるyambejpさんのような方がいるからあきらめずに済んでいると思います。ありがうとうございました。
yambejp

2016/12/09 03:44

ajaxの場合バックグラウンドでの処理なのでエラー状況がぱっとみわかりづらいですね firefoxの開発ツール(F12)でネットワークとjsのコンソールをチェックしながらやるとよいですね とくにネットワークのログは、送った生データとレスポンスのテキストが参照できるので 大抵の障害は検証できるとおもいます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問