Question

我正在尝试实现多文件上传，我现在正在使用iframe帖子表单并在回调函数中实现一些额外的功能。

我现在想要添加多个文件上传，以便在第一个上单击提交时创建新表单字段，第一个被删除，下一个字段在完成后开始上传。 Iframepost表单如何在完成一个文件时选择上传下一个文件。

$('#id').iframepostform(function(){
post:blah blah
complete:
my functionality
}

现在我想对iframe的表单进行递归调用，并更改了id。

Answer 1

之前已多次这样做过。我建议不要编写另一个自定义JavaScript文件上传器（除非你因为某些其他原因而）。我推荐优秀的Pulpload。我希望使用现有的，经过良好测试的，经过验证的解决方案相比新的实施方案要少得多。

编辑：这很不幸！但是，我希望built a demo能帮助您找到解决方案。它不执行jQuery AJAX post()，但它会克隆表单，增加字段ID号，然后在“上传”完成时删除旧表单。出于演示的目的，我使用简单的setTimeout()模拟“上传”。

修改：使用.live()

的完整解决方案

HTML：

<div>
    <form>
        <input type="file" id="form1_field1"/>
        <input type="submit" value="Make it so" id="form1_field2"/>
    </form>
</div>

JavaScript的：

$('input[type="submit"]').live('click', function() {
    var formClone = $('form:first-child').clone();

    formClone.find('input').each(function(i) {
        $(this).attr('id', $(this).attr('id').replace(/form(\d+)/, function(fullMatch, n) { return 'form'+(Number(n)+1); }));
    });
    var thisForm = $(this).closest('form');
    $('div').append(formClone).children(':last').hide().fadeIn(1500);

    // do ajax post here (faking the "upload time" with a timeout)
    // but really the "hideFinishedForm" method body needs to
    // go in the upload success callback
    window.setTimeout(hideFinishedForm, 5000, thisForm);

    return false;
});

function hideFinishedForm(formToRemove) {
    $(formToRemove).remove();

    // now submit the next form
    $('form input[type="submit"]').trigger('click');
}

进一步阅读Difference between jQuery `click`, `bind`, `live`, `delegate`, `trigger` and `on` functions (with an example)?

使用javascript上传多个文件

1 个答案: