如何使用 AJAX 和 PHP 同时将一张图片和“两个 textareas 值”发布到数据库？

Question

修改此脚本，以便我可以同时插入图像和文本 (JSON)。 使用 jquery.form.js 插件，我想同时插入图像和 textarea 值......告诉我是否还有其他替代方法可以在不使用 jquery.form.js 插件的情况下做到这一点。我是 ajax 的新手。 。请帮我 。

图片转到ajaximage.php，文本转到ajtest.php，当我同时上传图片和文本时，插入图片，然后插入文本，一次提交使用两行（当textarea和image字段不为空时），第一行是用于图像和文本区域的第二行，这是我的问题，我想在一行中插入图像和文本。

脚本 ：

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

<script type="text/javascript">
$(document).ready(function() { 


$('#photoimg').live('change', function(){ 
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();

        });
    }); 

</script>

<script type="text/javascript">
$(document).ready(function() {
$(".submit_button").click(function() {
var message = $('#content').val();
var textcontents = $("#source").val();


$.ajax({

type: "POST",
url: './ajtest.php',
data: {tc:message,ts:textcontents},
cache: true,

});

});
});
</script>

形式：

<form id="imageform" method="post" enctype="multipart/form-data"           action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>


<form id="text" method="post" action=''>
<textarea style="width:728px; font-size:14px; height:60px; font-weight:bold;      resize:none;" name="content" id="content" placeholder="Thread content" ></textarea><br />    <br/>
<textarea style="width:728px; font-size:14px; height:40px; font-weight:bold;   resize:none;" name="source" id="source" placeholder="Thread source" ></textarea><br />


<input type="submit" value="Post" name="submit" class="submit_button"/>
</form>

Answer 1

您可以使用 FileApi( http://www.w3.org/TR/FileAPI/ ) 获取图像数据并将其转换为 dataURL，然后将其作为 post param(string) 发送，但这实际上取决于您支持的浏览器。 或者，您可以使用隐藏的 iframe 作为表单目标，这样您的页面就不会被重定向。 请参阅此链接： http : //www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html