如何使用ajax从表单发送复选框和文件的值

时间:2012-03-24 18:49:59

标签: php ajax jquery

我有表单,我想用ajax将值发送到php脚本,但是如果选中它并且不发送带有头像的文件,它不会发送chceckbox的值。因此表单仅从文本输入发送值,但不从复选框和文件发送。请问有什么问题可以帮我吗? 形式:

<form action='' id='form1' method='post' name='form1' ENCTYPE='multipart/form-data'>
<input type='text' name='name' id='name' value=''>
<input type='text' name='age' id='age' value=''>
<input type='text' name='hobby' id='age' hobby=''>
<input type="checkbox" name="chkPHP" id="chkPHP" value="checked">
<input type='file' name='avatar' id='avatar' value='insert avatar' SIZE='30' accept=''>
<input type='submit' name='submit' id='submit' value='submit'>
</form>

从表单发送值的脚本:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
    $('#submit').click(function() {

        $('#waiting').show(0);
        $('#form1');
        $('#error').hide(0);

        $.ajax({
            type : 'POST',
            url : 'pksZpacuj.php',
            dataType : 'json',
            data: {
                name: $('#name').val(),
                age: $('#age').val(),
                hobby: $('#hobby').val(),
                chkPHP: $('#chkPHP').val(),
                avatar: $('#avatar').val()
            },
            success : function(data){
                $('#waiting').hide(0);
                $('#error').removeClass().addClass((data.error === true) ? 'error' : 'success')
                    .html(data.msg).show(0);
                if (data.error === true)
                    $('#form1');
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                $('#waiting').hide(0);
                $('#error').removeClass().addClass('error')
                    .text('There was an error.').show(0);
                $('#form1');
            }
        });

        return false;
    });
});  
</script> 

2 个答案:

答案 0 :(得分:1)

在您的ajax调用中,单独发送data: $('#form1').serialize()而不是分别发送每个值可能更容易。

仅供参考,您发送的文件将位于$_FILES数组中,而不是PHP脚本中的$_POST

答案 1 :(得分:0)

通过AJAX上传文件非常困难,并不适用于所有浏览器。我强烈建议不要这样做。

如果你真的想,你可以关注这篇精彩帖子:http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/