PHP jQuery .ajax() 文件上传服务器端理解答案

【问题标题】：PHP jQuery .ajax() file upload server side understandingPHP jQuery .ajax() 文件上传服务器端理解
【发布时间】：2012-01-18 21:09:46
【问题描述】：

我有一个 HTML 表单，以前只用于用户的文本属性，都是使用 AJAX 通过 URL 调用 PHP 控制器函数，通过数据库和服务器端调用刷新页面内容（精简版）

 <input type="text" id="firstname" name="FIRSTNAME"/>
 <input type="text" id="lastname" name="LASTNAME"/>
 <input name="Submit"type="submit" value="Submit" />

这个“创建用户”表单现在需要为用户图像合并一个文件上传机制

 <input type="file" name="userImage" />

问题是表单是通过.serialize 在.ajax #create form submit 中提交的

        $.ajax({
            url: 'controller.php?command=create',
            type: 'POST',
            data: $( form ).serialize(),

create URL 调用 PHP 控制器 echo $dmv->create(); ，即模型 public function create(){ //execute database insert and execute

我已经读到序列化对文件没有意义，这是真的，但我也想弄清楚如何更新我现有的表单以将文件上传功能合并到其中

我试图理解 jquery.form.js 插件 (http://malsup.com/jquery/form/#file-upload) 但不明白如何将它们联系在一起。

我相信我需要做的是让文件上传作为单独的逻辑执行，然后与文件名的原始逻辑联系起来，这是文件存储，唯一的图像名称存储在记录下的数据库中，而不是BLOB 图像存储。

如果我可以提供任何进一步的信息，请告诉我，并感谢可以提供的任何帮助。

【问题讨论】：

您不能使用 ajax 调用上传。获得 ajax 感觉的唯一方法是使用框架提交文件 onchange。然后返回图像作为结果。
我知道如何使用 ajax 和 javascript 来做到这一点（我不知道 jquery）。这会有帮助吗？
是的。我想我对 php 处理文件上传感兴趣，但提交仍然处理其他表单值，之前或之后。我无法理解如何说 jquery 表单插件的结果一旦提交就可以使用，或者如何使用这些值完成文件上传

标签： php jquery ajax forms file-upload

【解决方案1】：

这是迈克尔所说的一个例子。 http://www.phpletter.com/Our-Projects/AjaxFileUpload/

【讨论】：

这是我对迈克尔的反应，但我似乎无法对他作出反应。所以这是一个答案......
那是什么？？ Ajax文件上传？？？此链接不通过 Ajax 提供文件上传功能，他们正在发出整个帖子请求并刷新整个页面..

【解决方案2】：

您不能通过 AJAX 上传文件。您仅有的可能是使用 Flash（例如 Uploadify：http://www.uploadify.com/）、iFrame，或者只是提交表单。表单必须将 enctype 设置为 multipart。

<form action="script.php" method="post" enctype="multipart/form-data">

插件可以通过创建“隐藏”iframe 来模仿 AJAX 文件上传。示例：http://valums.com/ajax-upload/

【讨论】：

我无法通过 ajax 上传文件，但是有没有办法 AJAX 可以调用 php 脚本进行上传？我已经在多个场合完成了能够使用 php 提交表单和编写文件，但在这个特定的例子中，由于整个应用程序都是通过 ajax 和 php 调用加载的，我不能只通过通常的 POST 刷新页面。所以不一定是ajax处理文件上传，而是ajax调用php handler
如果您问是否可以提交 AJAX 帖子，请回调 PHP 脚本，让它抓取文件并上传，答案是否定的。PHP 是一种后端处理语言，这意味着它将处理您发送给它的内容，并回显（打印）任何输出。它不能处理该范围之外的东西。要使您的上传工作类似于 AJAX，您需要使用上述的 Flash 或 iframe。它模仿了类似 AJAX 的功能，但实际上并不是 AJAX。（因为您根本无法使用 AJAX 上传文件）

【解决方案3】：

您可以使用隐藏的 iframe 来模拟 AJAX 调用。您甚至可以像 AJAX 调用一样实现回调函数并获取服务器响应：

HTML --

<form enctype="multipart/form-data" target="workFrame"></form>
<iframe id="workFrame" style="display:none;"></iframe>

JS--

//bind an event handler to the form with the file input
$('form').on('submit', function () {

    //check to make sure the user has selected an image, if not then stop the form from submitting
    if ($('#userImage').val().length == 0) return false;

    //bind an event handler to the `load` event for the iframe so we will have a callback for the form submission
    $('#workFrame').on('load', function () {
        var $this = $(this);

        //remove this event handler
        $this.off('load');

        //get the response from the server
        var response = $this.contents().find('body').html();
        //you can now access the server response in the `response` variable
    });

    //return true so the form submits normally
    return true;
});

请注意，.on() 是 jQuery 1.7 中的新内容，在这种情况下与 .bind() 相同。

【讨论】：