Question

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

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

为了解决过去的这些事情，我使用live（）来倾听。但我不能将这些ajaxUpload实例声明为实时事件。那么如何让这个上传按钮运行？

Answer 1

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

Issue with binding in jQuery for copied elements

Answer 2

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

Answer 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');

Answer 4

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

Answer 5

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

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

live（）有效，但它只在点击后实例化对象。所以我需要再次点击它才能使上传触发器正常工作。

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

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

Answer 6

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

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

Answer 7

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

在页面的最后我读了这个 $（本）.trigger（ “点击”）; 并且我改变它以适应我并且在ajax呼叫结束时放置它并且它运作。 jQuery的（ “＃上传”）触发（ “点击”）。欢呼... 谢谢每个人。

页面加载后jQuery文件上传

7 个答案: