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

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

ただいまの
回答率

90.50%

  • HTML5

    5121questions

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

  • Ajax

    1325questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,309

kobe-color

score 3

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

</form>


上記のように、ファイル選択とドラッグ&ドロップの2つを用意し、どちらを使っても<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);     //処理(1)
        imageFileUpload(files[0]);                //処理(2)
          }
        }
        //ファイルの読込が終了した時の処理(1)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);
        }
    //ファイルの読込が終了した時の処理(2)ファイルをアップロード
    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){
        //何かする
        }
      });
    }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/09/03 16:42

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

    キャンセル

  • kobe-color

    2016/09/03 17:14

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

    キャンセル

  • kei344

    2016/09/03 17:27

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

    キャンセル

  • kobe-color

    2016/09/10 08:42

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

    キャンセル

回答 1

0

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

  • 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);     //処理(1)
        imageFileUpload(files[0]);                //処理(2)
          }
        }
        //ファイルの読込が終了した時の処理(1)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);
        }
    //ファイルの読込が終了した時の処理(2)ファイルをアップロード
    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);

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • HTML5

    5121questions

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

  • Ajax

    1325questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。