使用 jQuery ajax 上传图片的建议答案

【问题标题】：Suggestions to upload image using jQuery ajax使用 jQuery ajax 上传图片的建议
【发布时间】：2011-06-24 00:19:16
【问题描述】：

我有一个有 3 个输入的表单：

[1] 用于状态更新的文本输入字段

[2] 文件上传（用于图片）

[3] 用于附加链接的文本输入字段

用户根据他们想要做什么在每一个之间切换。例如，在选择[2]时，隐藏输入[1]和[3]。

所有这些输入都包含在一个 ID 为 posts_form 的表单中。选项 [1] 和 [3] 通过 Ajax 发布到不同的控制器。

我现在的问题是选项 [2]，因为无法使用 jQuery ajax 上传图片。

我见过的一些解决方案涉及使用 jQuery Form 插件，但我想知道是否可以在不使用插件的情况下进行图像上传。

例如，这将是用于上传的代码库，这当然是行不通的。

    $.ajax({
        url: 'chat/upload/' + <?php echo $page_id; ?>,
        type: 'POST',
        data: $('#posts_form').serialize(),
        dataType: 'html',
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function(html) {
            $('#attach').replaceWith(html);
            $('#loading').hide();
            $('#posts_form input').val('');
            $('.posts_link').val('');
            $('#chat_input').hide();
            }
        });

有什么建议可以添加/更改以允许仅使用 jQuery 上传图片，无需插件？

谢谢。

【问题讨论】：

标签： jquery ajax image file-upload upload

【解决方案1】：

没有直接的方法可以通过 AJAX 上传文件。这是 HTML4 的限制。解决方法是使用 iframe 或 Flash。

在 HTML5 中，引入了 File API 来解决这个问题。这是一个利用该 API 的演示（使用 Firefox 3.6+），它允许您拖放图像并加载它而无需将其发送回服务器：http://html5demos.com/file-api。它还支持多个文件：http://demos.hacks.mozilla.org/openweb/DnD/。

如果您有兴趣，可以阅读that specification on W3.org。

如果您不能依赖客户端来拥有支持 HTML5 文件 API 的浏览器，您可以选择自己拥有或选择使用实现 iframe 解决方法的库：

【讨论】：

thx @william - 我正在尝试使用 jQuery 表单，但在触发提交时遇到了问题，因为我的按钮不是使用 input type=submit 呈现的——see here for the new question I posted——我也会检查你的其他解决方案

【解决方案2】：

你最好的选择是这个插件。如果没有这个，你就是在浪费时间。

http://jquery.malsup.com/form/

【讨论】：