脚本捕捉图像答案

【问题标题】：Script catching image脚本捕捉图像
【发布时间】：2012-10-08 06:22:24
【问题描述】：

我有这个脚本，所以它转到 ../AdsCreate/CreateCar.php 读取表单并插入数据库并将页面加载到某个 div 中，一切正常。

我有一个问题，表单的一部分是上传图片，现在我被告知这是因为下面的脚本序列化数据而不是基于文件的。

这是脚本。

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

$("#Submit").click(function() {

var url = "../AdsCreate/CreateCar.php"; // the script where you handle the form input.

$.ajax({
   type: "POST",
   url: url,
   data: $("#myForm").serialize(), // serializes the form's elements.
   success: function(html){ $("#right").html(html); }
 });

return false; // avoid to execute the actual submit of the form.
});
});
</script>

这是我的表格

<form method="post" enctype="multipart/form-data" id="myForm">
 <table class="default1" style="width: 100%" align="center">
      <tr>
        <td class="content1" colspan="3"><h3><b>Car Ads</b></h3></td>
      </tr>
      <tr>
      <td class="content1" width="70%">Make: <input type="text" name="name"></td>
      <td class="content1" width="15%">Model: <input type="text" name = "email"></td>
      <td class="content1" width="15%">Year: <input type="text" name = "phone"></td>
     </tr>
      <tr>
      <td class="content1" colspan="3">Main Photo: <input type="file" name="photo"></td>
     </tr>
      <tr>
      <td class="content1" colspan="3"><input type="submit" value="Upload" id="Submit"></td>
     </tr>
</table>
</form>

如何更改脚本，以便可以上传同时具有文件上传功能的表单？？

【问题讨论】：

AJAX 调用无法上传文件。通常的解决方法是创建一个隐藏的 iframe 并在那里进行正常的帖子提交。
我将如何添加上面给定的脚本，对此很新，谢谢。

标签： php javascript html ajax forms

【解决方案1】：

您可以使用此插件单独上传文件：

http://blueimp.github.com/jQuery-File-Upload/

您也可以使用 jQuery Forms 上传文件：

http://www.malsup.com/jquery/form/#file-upload

确保在选择文件后禁用提交按钮，以便在用户提交表单之前先上传图片。

【讨论】：