通过Ajax将多部分表单数据转发到PHP

时间:2016-07-15 06:22:35

标签: php jquery ajax

我的HTML中有一个表单。此表单采用文本输入和一个图像:

HTML

<form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">             
                        <textarea style="display: none" class="inputNumber" name="pages"></textarea>
                        <p>Image</p>
                        <input style="padding: 0px" type="file" name="image">
                            <p>Subtitle</p>
                            <input type="text" name="subtitle">

                            <p>Text</p>
                            <textarea name="text" rows="4"></textarea>
                            <input id="properties_btn" type="submit" value="Submit/Update">
                        </form>

此表单将通过Ajax提交:

的jQuery / AJAX

            $('body').on('submit', '.article_properties_form', function(e) {
          e.preventDefault();

          if ($(this).valid()) {
          $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function() {

                        }   
                    }); 
          }

        });

数据将被转发给PHP:

PHP

if (isset($_POST["subtitle"], $_POST["pages"], $_POST["text"], $_POST["image"]))
    {
                //Some SQL
    }

当我删除enctype和input type =“image”属性时,表单成功运行。这意味着我必须对image属性做错。我无法弄清楚如何通过Ajax将这个表单中继到PHP,图像属性保持不变。我怎么能做到这一点?

2 个答案:

答案 0 :(得分:1)

您需要保留enctype并抓住文件值,您需要使用$_FILES['image']来获取&#34;图像&#34;值。

在AJAX代码上,使用:

data: new FormData( this ),
processData: false,
contentType: false

答案 1 :(得分:0)

试试这个:

var fd=new FormData(document.getElementById("YOUR_FORM_ID"));
$.ajax({
type:"POST",
url:"",
data:fd,
enctype:'multipart/form-data',
processData:false,
contentType:false,
success:function(data){console.log(data);},
error:function(err){console.log(err);}
});