jQuery多动态表单到多个动态iFrame

Question

我正在创建一个多文件上传.在我构建文件列表的验证过程中(在提交之前),第一个动态创建的<form>将按预期提交和工作,但其他动态创建<form>的不会. 这在IE7 +或FireFox中不起作用......

另请注意,此代码在SharePoint 2007中,以防任何人可以指出任何限制!谢谢!

用例

1. 用户单击浏览并选择文件...
2. 该<input type="file" />控制是隐藏的.
3. jQuery的包装了一个<form>围绕<input type="file" />,并增加了新<iframe>的形式被引用作为target为响应并提交表单.
4. 在服务器端,我运行一些验证并发回文件名,大小和要删除的选项.
5. 在<iframe>(响应)中,用户看到类似Winter.jpg |的内容 10 KB | (x)删除
6. 的jQuery clone()的所述<input type="file" class="uploader" />控制和append()'它S到<div>在情况下,用户期望上传更多.
7. 注: 请记住clone(),<form>和<iframe>被赋予唯一的ID的id,name和target分别.该.ashx文件已经过测试和运行.我很困惑为什么我不能继续创建新的<form>s,<input type="file"/>'s <iframe>'和s并添加到列表中......

HTML

<div id="files">
    <div class="field">
        <input id="file" type="file" name="file" class="uploader" value="Browse..." />
    </div>
</div>

Javascript
抱歉,代码可能有点草率 - 这里的试错法......

<script type="text/javascript">
    $('.uploader').live('change', function(){
        var $clone = $(this).parent().clone();
        var filename = $(this).val().substring($(this).val().lastIndexOf('\\')+1);

        //var $form = $('<form id="uploadForm" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo" enctype="multipart/form-data">');
        var $form = $('<form>').attr('id', 'uploadForm').attr('action', '_layouts/GetFileInfo.ashx').attr('method', 'post').attr('target', 'fileinfo').attr('enctype', 'multipart/form-data');
        var $result = $('<iframe name="fileinfo' + _uploadId + '" src="upload.html" frameBorder="0" allowtransparency="true" style="width: 250px; height: 25px; border:0;">');

        $form[0].id += _uploadId;
        $form[0].target += _uploadId;
        $clone.find('input')[0].id += _uploadId;
        $clone.find('input')[0].name += _uploadId;

        //remove button
        $('<div class="remove" style="float:right;">').html("x").appendTo($(this).parent());

        //append the goodness           
        $(this).parent().append($result);
        $(this).wrap($form);

        //let the form render and submit
        window.setTimeout(function(){
            $('#files form').last().submit();
        }, 1000);

        $(this).hide();

        $clone.find('input').val('');

        $(this).parents('#files').append($clone);

        _uploadId++;
    });
</script>

我想你们可能会问这里是渲染的HTML ......

呈现HTML

<div style="float: left;" class="col" id="files">
    <div class="field">
        <form id="uploadForm0" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo0" enctype="multipart/form-data">
            <input type="file" value="Browse..." class="uploader" name="file" id="file" style="display: none;">
        </form>
        <div style="float: right;" class="remove">x</div>
        <iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo0"></iframe>
    </div>
    <div class="field">
        <form id="uploadForm1" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo1" enctype="multipart/form-data">
            <input type="file" value="Browse..." class="uploader" name="file0" id="file0" style="display: none;">
        </form>
        <div style="float: right;" class="remove">x</div>
        <iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo1"></iframe>
    </div>
    <div class="field">
       <input type="file" value="Browse..." class="uploader" name="file01" id="file01">
    </div>
</div>

Answer 1

总之，这个问题仍然存在，但我实现了jQuery Forms（它也可以通过使用 iframes 与多部分表单一起使用），稍微改变了设计，并且它可以工作。

如果我不得不猜测，我认为问题是在 JS 中动态创建<form>、和其他元素时引起的。<input type="file" />就好像 SharePoint 有一个规则或侦听器来拦截表单submit()事件并return false;不允许它到达 ASHX 处理程序......

我使用上面相同的 HTML，只是现在 JavaScript 使用单个<input type="file />控件和<form>. 我通过 附加结果$.ajaxSubmit({success: function(result)})。

我保留clone()输入并将结果附加到它们。当用户选择上传图像时，我只需<form>在 JS 中创建一个对象并使用$.ajaxSubmit它即可。

我在 C# 中迭代context.Request.Files​​并将它们附加到 SharePoint 2007 中的关联ListItem。

干杯，
鲍比