アップロード画像

Question

こんにちは私は、スクリプトを作成しているが、問題は、私はテキストエリアを持っていたが、いくつかの理由のために私が変更されたことであるAJAX呼び出しを訴えてデータベースにデータをアップロードしようとしていますテキストエリアに、現在編集可能なdivの私の質問こと私はdivの

<form method="POST" action="" id="post" enctype="multipart/form-data" onsubmit="return false;"> 
       <ul> 
        <li> 
         <i class="fa fa-photo"></i> Upload A Photo/Document 
         <input type="file" name="image" /> 
        </li> 
       </ul> 
       <div id='display'></div> 
       <div id="contentbox" contenteditable="true" name="post_dt"> 
       </div> 

       <input type="submit" id="sb_art" class="btn_v2" value="Start Discussion" /> 
      </form> 

からデータを取得し、これは、アップロードデータ

あなたは、編集可能な要素からコンテンツを取得するための正しい方法を使用している

$(document).ready(function(e) { 
$("#post").on('submit', (function(e) { 
    $(document).ajaxStart(function(){ 
     $("#load").css("display", "block"); 
    }); 
    $(document).ajaxComplete(function(){ 
     $("#load").css("display", "none"); 
    }); 

    var form = this; 
    var content = $("#contentbox").html(); 
    $.ajax({ 
     url   : "url/demo/forums/post_forum", 
     type  : "POST", 
     data  : {new FormData(this), content: content}, 
     contentType : false, 
     cache  : false, 
     processData : false, 
     success  : function(data) { 
      $("#data_update").prepend($(data).fadeIn('slow')); 
      form.reset(); 
     } 
    }); 
})); 
}); 

Answer 1

用に作成された私のAjaxのスクリプトで行う方法です：html() 。あなたの問題は、データの送信方法です。 FormDataでバイナリデータを送信する場合、エンコードするオブジェクトの内部にバイナリデータを配置することはできません。代わりに、append()を使用して追加データをFormDataに追加する必要があります。これを試してみてください：

$("#post").on('submit', function(e) { 
    $("#load").show(); 
    var form = this; 
    var formData = new FormData(this); 
    formData.append('content', $("#contentbox").html()); 

    $.ajax({ 
    url: "http://tfsquare.com/demo/forums/post_forum", 
    type: "POST", 
    data: formData, 
    contentType: false, 
    cache: false, 
    processData: false, 
    success: function(data) { 
     $("#data_update").prepend($(data).fadeIn('slow')); 
     form.reset(); 
     $("#contentbox").empty(); 
    }, 
    complete: function() { 
     $("#load").hide(); 
    } 
    }); 
}); 

はまた、私はcompleteメソッドを使用するajaxStart()とajaxComplete()の使用を変更することに注意してください。フォームの送信ごとに新しいグローバルAJAXハンドラを定義することはむしろ冗長です。