ajaxで画像をformDataを使って送信できない

Question

<form action="同じページ">
  <input type="file" name="file" ・・・/>
  <div>ドラッグ＆ドロップ</div>
  <img id="image" alt="">
  いろいろ<input>や<textarea>など住所録のようなフォーム
  <input type="submit"・・/>

</form>

上記のように、ファイル選択とドラッグ＆ドロップの２つを用意し、どちらを使っても<img>に対してDOM操作を行い画像を表示させるようにしました。ここまでは問題なくできています。

スクリプトでドラッグした後の処理に、画像を<img>に表示させたあとに、サーバー側にアップロードをさせたくスクリプトを書いたのですが、ドラッグ＆ドロップのほうがアップロードできずに困っています。

アップロードですが、$_FILEに一時的に保存させるだけをしたいのです。
いろんなサイトを見ると、アップロード＝$_FILEに一時保存させた後にすぐmoveを使って移動させることを、ajaxのバック関数（php）でさせているものが多いので、なかなか一時保存にたどり着きません。

スクリプト側は以下のとおりです。
関数imageFileUploadの内容がおかしいのではと思うのですが、よくわかりません。
フロントエンドにwordpressを使っていますが、使う画面は公開画面レベルなので独自のajaxにしています。

どなたか見ていただけないでしょうか？

window.onload=function() {
        var print_img_id = 'print_img';
        var print_DataURL_id = 'print_DataURL';
        if (checkFileApi()){
          var file_image = document.getElementById('file-image');          //ファイル選択
          file_image.addEventListener('change', selectReadfile, false);
          var dropZone = document.getElementById('drop-zone');          //ドラッグオンドロップ
          dropZone.addEventListener('dragover', handleDragOver, false);
          dropZone.addEventListener('drop', handleDragDropFile, false);
        }
        function checkFileApi() {        // FileAPIに対応しているか
          // Check for the various File API support.
          if (window.File && window.FileReader && window.FileList && window.Blob) {
            return true;            // Great success! All the File APIs are supported.
          }
          alert('The File APIs are not fully supported in this browser.');
          return false;
        }
        function selectReadfile(e) {         //ファイルが選択されたら読み込む
          var file = e.target.files;
          var reader = new FileReader();
          //dataURL形式でファイルを読み込む
          reader.readAsDataURL(file[0]);
          //ファイルの読込が終了した時の処理
          reader.onload = function(){
            readImage(reader, print_img_id, print_DataURL_id);
          }
        }
        function handleDragOver(e) {        //ドラッグ＆ドロップ
          e.stopPropagation();
          e.preventDefault();
          e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }
        function handleDragDropFile(e) {
          e.stopPropagation();
          e.preventDefault();
          var files = e.dataTransfer.files; // FileList object.
          var file = files[0];
          var reader = new FileReader();
          reader.readAsDataURL(file);          //dataURL形式でファイルを読み込む
          reader.onload = function(){          //ファイルの読込が終了した時の処理
            readImage(reader, print_img_id, print_DataURL_id); 	//処理（１）
	    imageFileUpload(files[0]);				//処理（２）
          }
        }
        //ファイルの読込が終了した時の処理（１）HTML書き出し
        function readImage(reader, print_image_id, print_DataURL_id ){
          //ファイル読み取り後の処理
          var result_DataURL = reader.result;
          var img = document.getElementById('image');          //読み込んだ画像とdataURLを書き出す
          var src = document.createAttribute('src');
          src.value = result_DataURL;
          img.setAttributeNode(src);
        }
	//ファイルの読込が終了した時の処理（２）ファイルをアップロード
	function imageFileUpload(f){
	  var formData =new FormData();
	  formData.append('image', f);
	  $.ajax({
	    type:'POST',
	    contentType:false,
	    processData:false,
	    url:'http://xxxxxxx.xxx/public_html/wp-content/uploads',
	    data:formData,
	    dataType:'json',
	    success:function(data){
		//何かする。デバッグしたいがalert出力できない。？？？
	    },
	    error:function(data){
		//何かする
	    }
	  });
	}
}

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[kobe-color]

慣れないものですみません。kei344さん、前回も回答いただいた方ですね。ありがとうございます。

[kei344]

質問文は編集が可能です。ここのエリアは回答ではなく情報の追加・修正の依頼フォームです。また、例示用ドメインはご自身で所有されていない限りexample.comを利用してください。

[kobe-color]

kei344さんご回答ありがとうございました。firebugを使ってデバッグのやり方がわかってきたので調べると、私が上記ソースをwordpressで組み込んでいることが原因で、ajax通信ができていいないか、ajax指定に何か原因があるかではないかと思えてきました。通常のhtmlでは問題なくできました。google検索するとwordpressに用意されているajax通信を使わなくてもオリジナルでajax通信ができると私は理解していたのですが、何かしら渡しの認識違いをしているのかもしれません。wordpressのajax経路を使わないと駄目なのでしょうか？もしそうならば、わかりやすいサンプルが欲しいのですがご存知でしょうか？

Answer 1

私のローカル環境で、下記のようにファイルを作成し確認致しましたが、ドラッグ＆ドロップでも正常にレスポンスが返ってきています。
ご自身の環境でもお試し頂けますでしょうか。

• htmlファイルで読み込んでいる、スクリプトファイルはご自身でご用意ください。
• up.jsは、kobe-colorさんが記載された、スクリプトを全てコピーし、imageFileUpload()関数内のurlのみ変更致しました。
• ajaxで読み込むphpファイル内で、var_dump($_FILES); などと記載し出力すれば、Firefoxのfirebugで、コンソールからレスポンスを確認できると思います。

---

[index.html]

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/up.js"></script>
</head>
<body>

<form action="" method="post">
  <input id="file-image" type="file" name="file">
  <div id="drop-zone" style="height: 100px;">ドラッグ＆ドロップ</div>
  <img id="image" alt="">
  いろいろ<input>や<textarea>など住所録のようなフォーム</textarea>
  <input type="submit">
</form>

</body>
</html>

[up.js]

window.onload=function() {
        var print_img_id = 'print_img';
        var print_DataURL_id = 'print_DataURL';
        if (checkFileApi()){
          var file_image = document.getElementById('file-image');          //ファイル選択
          file_image.addEventListener('change', selectReadfile, false);
          var dropZone = document.getElementById('drop-zone');          //ドラッグオンドロップ
          dropZone.addEventListener('dragover', handleDragOver, false);
          dropZone.addEventListener('drop', handleDragDropFile, false);
        }
        function checkFileApi() {        // FileAPIに対応しているか
          // Check for the various File API support.
          if (window.File && window.FileReader && window.FileList && window.Blob) {
            return true;            // Great success! All the File APIs are supported.
          }
          alert('The File APIs are not fully supported in this browser.');
          return false;
        }
        function selectReadfile(e) {         //ファイルが選択されたら読み込む
          var file = e.target.files;
          var reader = new FileReader();
          //dataURL形式でファイルを読み込む
          reader.readAsDataURL(file[0]);
          //ファイルの読込が終了した時の処理
          reader.onload = function(){
            readImage(reader, print_img_id, print_DataURL_id);
          }
        }
        function handleDragOver(e) {        //ドラッグ＆ドロップ
          e.stopPropagation();
          e.preventDefault();
          e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }
        function handleDragDropFile(e) {
          e.stopPropagation();
          e.preventDefault();
          var files = e.dataTransfer.files; // FileList object.
          var file = files[0];
          var reader = new FileReader();
          reader.readAsDataURL(file);          //dataURL形式でファイルを読み込む
          reader.onload = function(){          //ファイルの読込が終了した時の処理
            readImage(reader, print_img_id, print_DataURL_id);     //処理（１）
        imageFileUpload(files[0]);                //処理（２）
          }
        }
        //ファイルの読込が終了した時の処理（１）HTML書き出し
        function readImage(reader, print_image_id, print_DataURL_id ){
          //ファイル読み取り後の処理
          var result_DataURL = reader.result;
          var img = document.getElementById('image');          //読み込んだ画像とdataURLを書き出す
          var src = document.createAttribute('src');
          src.value = result_DataURL;
          img.setAttributeNode(src);
        }
    //ファイルの読込が終了した時の処理（２）ファイルをアップロード
    function imageFileUpload(f){
      var formData =new FormData();
      formData.append('image', f);
      $.ajax({
        type:'POST',
        contentType:false,
        processData:false,
        url:'uploads.php',
        data:formData,
        dataType:'json',
        success:function(data){
        //何かする。デバッグしたいがalert出力できない。？？？
        },
        error:function(data){
        //何かする
        }
      });
    }
}

[uploads.php]

<?php
var_dump($_FILES);