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> コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/05 06:24
2016/12/06 03:34
2016/12/06 05:24
2016/12/08 23:54
2016/12/09 03:44