页面加载后的jQuery文件上传答案

【问题标题】：jQuery file upload after page load页面加载后的jQuery文件上传
【发布时间】：2010-02-01 21:31:48
【问题描述】：

我有一个通过 $.ajax 请求加载 HTML 表单的页面。

表单有一个文件上传选项。我已经尝试了几个 Ajax 上传插件，它们都要求我实例化一些 ajaxUpload() 类型的对象，该对象在内部创建点击侦听器。然而，这些监听器不会触发，因为动态加载的表单不是 DOM 可访问的。

过去为了解决这些问题，我使用 live() 来收听。但我不能将这些 ajaxUpload 实例声明为实时事件。那么如何才能让这个上传按钮起作用呢？

【问题讨论】：

标签： jquery upload live

【解决方案1】：

我似乎记得，从某个地方，livequery 插件可以处理这种类型的事情。在我寻求真相的过程中，我遇到了这样的事情：

Issue with binding in jQuery for copied elements

【讨论】：

livequery 在我需要的 jquery 1.4 中不起作用。不过谢谢。我现在正在试验 live()。

【解决方案2】：

AJAX 无法上传文件。 jQuery form plugins 使用隐藏 iframe 技术上传文件。要进行真正的 AJAX 上传，您可以使用基于 Flash 的上传器。我推荐你试试uploadify。

【讨论】：

AJAX 可以在 iframe 中上传，这对我来说很好。我尝试过uploadify 和swfupload，但它们总是给我带来问题。而且我宁愿不处理闪存。
Flash 在技术上也不是 AJAX（或 AJAJ）。所有最新的浏览器，除了 IE，都支持 XHR 文件上传。 Malsup 的 jQuery 表单插件使用 XHR 在较新的浏览器上发送文件，并在较旧的浏览器和 IE 中降级为 iframe 技巧。我没有使用其他解决方案，但到目前为止，malsup 的插件对我来说非常有用！

【解决方案3】：

您的意思是，一旦您使用 ajax 获取表单，就无法在 DOM 中访问该表单？为什么不应该呢？

$.get(url_that_has_form, null, function(resp) {
    $('#some_container').html(resp);
    // Now the form is part of the document.
    // Run your ajax upload stuff here.
    new AjaxUpload('#id_of_form_you_just_added', options);
}, 'html');

【讨论】：

这行不通。加载 HTML 不会将其添加到 jQuery 中的 DOM。这就是 live() 的目的。
你错了。加载 HTML 不会自动将其添加到 DOM；这就是为什么我在 .html() 调用中明确添加它。您还可以使用 append() 或任何其他相关方法。 live() 的目的是让您可以在获取之前设置事件处理程序。

【解决方案4】：

您能否将动态加载的表单添加到文档中？（然后实例化ajaxUpload对象''''''将表单添加到文档中）

【讨论】：

我正在这样做，但它不起作用。这是因为当我添加表单时，它没有附加到 DOM。因此，即使我在加载后声明对象，它也无法解析 DOM 的那部分。

【解决方案5】：

这是迄今为止我能做到的最好的：

$('#uploadButton').live('click', function(){                
    new AjaxUpload('uploadButton', {
       action: 'upload-handler.php',
       onComplete: function(file, response){
        alert(response);
       });
});

live() 有效，但它仅在单击后实例化对象。所以我需要再次单击它才能使上传触发器起作用。

所以我一直在尝试以某种方式删除额外的点击。我希望以下内容能在函数结束时起作用，但它没有：

$(this).trigger("click");

【讨论】：

看我的回答。为什么不在点击处理程序中执行上述操作，而是在表单的 ajax 请求完成后的回调中执行？

【解决方案6】：

我已经通过使用不同的上传插件解决了这个问题 https://github.com/valums/file-uploader

这允许我在任何需要的时间调用一个函数来从一个 DOM 元素创建一个上传器。所以我只能在需要上传器时调用该函数。这样我就不需要依赖现场活动了。

【讨论】：

【解决方案7】：

@lawrence 谢谢，我遇到了同样的问题，在将 html 作为表单部分加载后，congaing 上传元素，我必须点击两次。虽然我在加载html后尝试了很多方法来重新绑定点击句柄但失败了。

在页面的末尾我读到了这个 $(this).trigger("点击"); 我将其更改为适合我并放置在 ajax 调用结束时，它可以工作。 jQuery("#upload").trigger("点击"); 欢呼... 谢谢大家。

【讨论】：