使用ajax发送multipart表单 - 发送文件和文本

时间:2013-12-02 08:14:51

标签: ajax jquery

我需要用ajax发送一些数据和图像文件。 我知道必须使用multipart form和formdata但我不知道如何 - 我用谷歌搜索它,我发现了一些发送文件的方式,但我需要发送整个表单。 这是我的html表单

<form id="formData" enctype="multipart/form-data">
                <input type="file" id="uploader"  name="image" accept="image/jpg, image/jpeg, image/png, image/bmp, image/raw"/>
                <input type="hidden"  name="action" id="action" value="receiver"/>
                <input type="hidden"  name="route" id="route" value="image"/>
 </form>

感谢。

1 个答案:

答案 0 :(得分:0)

希望像这样的东西可以为你配对......:)

html

//Include this script in head

 <script src="http://malsup.github.com/jquery.form.js"></script>

jQuery Form Plugin允许您轻松且不引人注意地升级HTML表单以使用AJAX。主要方法ajaxForm and ajaxSubmit从表单元素中收集信息,以确定如何管理提交过程。这两种方法都支持多种选项,使您可以完全控制数据的提交方式

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

脚本文件

$('#photoimg').on('change', function() 
 {
      $("#imageform").ajaxForm({target: '#preview', //Shows the response image in the div named preview 
         success:function(){

         }, 
         error:function(){

          } 
       }).submit();
});

ajaximage.php

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
$tmp = $_FILES['photoimg']['tmp_name'];


$path = "uploads/";
move_uploaded_file($tmp, $path.$name) //Stores the image in the uploads folder
}

您可以使用action,route文件中的$_POST获取php等字段的值。有关母马的详细信息请查看以下链接配对.. :)

http://malsup.com/jquery/form/#ajaxForm