如何使用 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