Ajax Post Form - 难以集成XHR2文件上传

时间:2012-09-29 05:20:13

标签: php jquery ajax upload xmlhttprequest

我已经在stackoverflow和google周围搜索过,发现了很多关于这个主题的资料,但其中没有任何材料可以帮助我理解我想要实现的目标。

我尝试创建一个异步发送表单数据并上传单个映像的表单,调整大小,重命名并通过相同的php脚本将其保存到指定目录。

如果以传统方式发送数据,一切都很完美。

当我试图将XHR集成到处理非文件格式数据的现有jQuery中,并将该文件与其他所有内容一起发送到PHP脚本时,我正在解决这个问题。

我对JS并不是特别精通,我非常擅长学习。到目前为止,我发现的所有内容都只是上传文件的示例,重点放在上传进度,多文件上传和拖放(我对此不感兴趣)这个项目)。

我不喜欢复制代码并试图将其与我所写的内容相媲美,我更愿意理解如何做到这一点......

有没有人遇到任何阅读材料/教程,演示和解释如何在标准的ajax表格帖子中实现ajax文件上传?

提前致谢。


我正在使用的代码的简化示例:

<script>

$('#editgig_form').submit(function(){

    $('#ng_loading').fadeIn(500);

    var eg_dataString = $('#editgig_form').serialize();

    $.ajax({
        type: "POST",
        url: "Resorces/Components/GigDiary/edit_gig.php",
        data: eg_dataString,
        success: function(){

        $('#giglist_canvas').load('Resorces/Components/GigDiary/refresh.php');

        $('#ng_loading').fadeOut(500);
        popupclose(edit_gig);                   
        editmenu_selected = '';
        }

    });

return false;

});

</script>   

-

<form id="editgig_form" method="post" enctype="multipart/form-data">
    <input type="text" name="date" />
    <input type="text" name="venue" />
    <input type="file" name="image" />
</form>

-

<?php

date = date("Y-m-d", strtotime($_POST['date']));
venue = $_POST['venue'];

// SCRIPT TO RESIZE IMAGE, SAVE TO DIRECTORY 

$update = "UPDATE gigdairy SET date="$date", venue="$venue", image="imgname";
mysql_query($update);

?>

1 个答案:

答案 0 :(得分:0)

您是否尝试打印要发送的数据(console.log在浏览器中或var_dump($_FILES)在您的php中)?我知道你只是发布文件的名称。

您需要实现此功能(文件上传),或者您可以使用jquery插件,例如plupload,HTML5文件上传......

这里的代码示例 http://www.html5rocks.com/en/tutorials/file/xhr2/