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发送二进制数据时，无法将其放在要编码的对象中。相反，必须使用FormData将其他数据添加到append()。试试这个：

$("#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处理程序是相当多余的。

使用可编辑的div上传图像

1 个答案: