javascript - 使用可编辑的 div 上传图像

Question

你好，我正在尝试使用 ajax 调用将数据上传到数据库 我已经创建了一个脚本，但问题是我有一个 textarea 但由于某些原因我将该 textarea 更改为可编辑的 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>

这是我为上传数据而创建的 ajax 脚本

$(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

您正在使用正确的方法从可编辑元素中获取内容: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();
    }
  });
});

另请注意，我将您对 ajaxStart() 和 ajaxComplete() 的使用更改为使用 complete 方法。在每次提交表单时定义新的全局 AJAX 处理程序是相当多余的。