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

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

ただいまの
回答率

90.51%

  • PHP

    24056questions

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

  • JavaScript

    20419questions

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

  • HTML5

    5128questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,180

s.kono

score 8

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>
コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

 追記

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

  • 送り元(send.htm)
<script src="js/jquery.js"></script> <!--適当に指定してください-->
<script>
$(function() {
  $("#droppable")
    .on("dragenter dragover",function(e){e.preventDefault();return false;})
    .on("drop", function(e){
    var file = e.originalEvent.dataTransfer.files[0];
    var fr = new FileReader();
    fr.onload = function(e) {
      var fd = new FormData();
      fd.append("userfile", new Blob([e.target.result],{"type":file.type}),file.name );
      $.ajax({
      url:"recv.php",
      type:"post",
      data:fd,
      dataType:"json",
      processData: false,
      contentType: false,
      success:function(data){
        console.log(data);
      },
      });
    };
    fr.readAsArrayBuffer(file);
    e.preventDefault();
    return false;
  });
});
</script>
<div id="droppable" style="border: gray solid 1em; padding: 2em;">
ファイルをドロップしてください。
</div>
  • 受け先:recv.php
<?php
//$_FILESで受けられる、あえて戻り値は返さなくてもいい
print json_encode($_FILES["userfile"]);
?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/05 15:24

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

    $.ajax({
    type: 'POST',
    contentType: false,
    processData: false,
    url: 'http://....&#039;,
    data: formData,
    dataType: 'json',
    success: function(data) {
    // メッセージ出したり、DOM構築したり。
    }

    キャンセル

  • 2016/12/06 12:34

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

    キャンセル

  • 2016/12/06 14:24

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

    キャンセル

  • 2016/12/09 08:54

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

    キャンセル

  • 2016/12/09 12:44

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

    キャンセル

同じタグがついた質問を見る

  • PHP

    24056questions

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

  • JavaScript

    20419questions

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

  • HTML5

    5128questions

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