title: Uploading image with editable div
body: <p>Hello I am trying to upload data to the database suing ajax call I have created a script but the problem is that I had a textarea but for some reasons i CHANGED that textarea to and editable div now my question is how do i get data from that div </p>
  
  <pre><code> &lt;form method="POST" action="" id="post" enctype="multipart/form-data" onsubmit="return false;"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;i class="fa fa-photo"&gt;&lt;/i&gt; Upload A Photo / Document
                          &lt;input type="file" name="image" /&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id='display'&gt;&lt;/div&gt;
                  &lt;div id="contentbox" contenteditable="true" name="post_dt"&gt;
                  &lt;/div&gt;
  
                  &lt;input type="submit" id="sb_art" class="btn_v2" value="Start Discussion" /&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>And this is my ajax script created for uploading data</p>
  
  <pre><code>$(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();
          }
      });
  }));
  });
  </code></pre>