Ajax 发布表单 - 集成 XHR2 文件上传的困难答案

【问题标题】：Ajax Post Form - Difficulty Integrating XHR2 File UploadAjax 发布表单 - 集成 XHR2 文件上传的困难
【发布时间】：2012-09-20 22:30:14
【问题描述】：

我搜索了 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);

?>

【问题讨论】：

显示一些代码你试过什么？
我还没有尝试过来实现这个，因为我真的不知道从哪里开始。我将添加一些我必须做的事情来说明我正在尝试做的事情。
好的，那么您需要在您的 ajax 调用中使用此类 new XMLHttpRequest().upload 使用 xhr2 通过 ajax 上传，这取决于浏览器，否则您必须使用传统方式上传。希望它有意义...
谢谢，这是我得出的结论。浏览器不是问题，因为所有用户都在使用 Chrome。实施它是我失败的地方，因为我不确定它是如何工作的。 IE。这是否允许将文件传递给 PHP？或者这个额外的 javascript 是否会上传文件，然后另一个 PHP 必须访问保存的文件并调整它的大小。
还有一个问题......你的传统方式是刷新页面保存？只是为了我的确定，所以我可以正确回答。

标签： php jquery ajax upload xmlhttprequest

【解决方案1】：

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

您将需要实现此功能（文件上传），或者您可以使用 jquery 插件来实现此功能，例如 plupload、HTML5 文件上传 ...

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

【讨论】：