ajaxのデータオブジェクトに画像を渡す

Question

私の問題になる前に、私は用語で作るつもりのエラーをお詫びします。 jQueryと学習の初心者です！

私は2つのfileds、テキスト、ファイルタイプのフォームを持っています。

<form method="post" action="" enctype="multipart/form-data"> 
    text <input type='text' id="textf" /><br> 
    images <input type='file' id="imagef" /><br> 
    <button name="submit" type="submit" id="submit">Finish</button> 
</form> 

アップロードされた画像を圧縮してからアップロードする必要があります。 （私はその部分をやった！）。圧縮されたイメージは、フォームの下のページにdataurl（？）として保存されます。

このフォーマット、

<img id="result_image" class="img_container" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... "> 

次に、フォームがサブミットされるときに生成された圧縮画像は、元画像に代えてアップロードしなければなりません。

私はjqueryを使用していますが、私の知識の欠如はそのようになっています。ここで私はあなたの助けが必要です、stackoverflow。

私はこれまでのところ得ている、PHPスクリプトのupload.phpから

$(document).ready(function(){ 
    $("#submit").click(function(e){ 
     e.preventDefault(); 

     var formData = { 
      'textf'    : $('#textf').val(), 
      'imagef'    : $('#result_image')[0] 
     }; 

     $.ajax({ 
      type  : 'POST', 
      url   : 'upload.php', 
      data  : formData, 
      dataType : 'json', 
      encode  : true 
     }) 
    }); 
}); 

応答は画像がない、

fweArray 
(
    [textf] => fwe 
) 

です！ 私は彼女を間違ってやっていますか？ 私は助けていただきありがとうございます。

Answer 1

あなたは単にテキストとして画像のデータURIを送信し、それを保存し、このためにフォームデータを必要といけないサーバー

var formData = { 
    'textf' : $('#textf').val(), 
    'imagef' : $('#result_image')[0].src 
};