Question

我之前有代码允许：当用户点击提交div时，contenteditable div中的文本将使用Jquery传递给upload.php，插入数据库然后立即返回。现在我正在尝试添加也可以处理图像的功能。即。上传到upload.php，插入mysql数据库，然后在存储后立即显示。如何修改下面的代码来实现这一目标？当我进行研究时，发布图像由表单提交按钮处理，我不想要。

HTML和CSS

<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <div id="topic_content_input" contenteditable="true"></div>
  <input multiple class="fileInput" type="file" id="files" name="files[]"/>
  <br>
  <div id="submit" > click me to pass the photo to upload.php</div>
  <div name="topicreturn"></div>
</body>
</html>

<script>
$(function(){
        $("#submit").click(function(){

            var txtContent = $("#topic_content_input").text();
                if(txtContent){

                    $.post("upload.php", {txtContent:txtContent}, function(result){
                        $("div[name=topicreturn]").prepend(result);
                        $("#topic_content_input").text('');
                    });
                 }
})
})

</script>

<style>
#topic_content_input{
    height: 60px;
    width:350px;
    border:1px solid blue;
}
#submit{
    background-color: #ffcc99;
    display:inline-block;
    padding:5px;
    border-radius: 3px;
    cursor:pointer;
}
</style>

PHP文件（upload.php）

<?php
require('connect.php');


$content=$_POST["txtContent"];

$sql="insert into topics (content) VALUES ('".$content."')";
        $result=mysqli_query($conn,$sql);
        if($result){
            echo $content;
        }
        else{
            echo $content;

        }

?>

Answer 1

表单提交（）方法

submit（）方法提交表单（与单击Submit按钮相同）。

document.getElementById("myForm").submit();

所以，你的代码可能是

<form id="myForm" action="form_action.asp">
<div id="topic_content_input" contenteditable="true"></div>
  <input multiple class="fileInput" type="file" id="files" name="files[]"/>
  <br>
  <div id="submit" onClick="subForm();"> click me to pass the photo to upload.php</div>
  <div name="topicreturn"></div>
</form>

<script>
function subForm() {
    document.getElementById("myForm").submit();
}
</script>

Answer 2

您可以使用div id来监听jquery中的点击

  $(".business-bottom-content").click(
    function()
    {
       var txtContent = $("#topic_content_input").text();
            if(txtContent){

                $.post("upload.php", {txtContent:txtContent}, function(result){
                    $("div[name=topicreturn]").prepend(result);
                    $("#topic_content_input").text('');
                });
             }
   });

单击div时如何上传图像，而不是提交按钮

2 个答案: