Question

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

另请注意，此代码位于 SharePoint 2007 ，以防任何人可以指出任何限制！谢谢！

使用案例

用户点击浏览并选择一个文件......
隐藏<input type="file" />控件。
jQuery在<form>周围包裹<input type="file" />，并添加表单引用的新<iframe>作为响应的target并提交表单。
在服务器端，我运行一些验证并发回文件名，大小和要删除的选项。
在<iframe>（响应）中，用户会看到类似 Winter.jpg |的内容10 KB | （x）删除
jQuery clone()是<input type="file" class="uploader" />控件，append()是<div>，以防用户希望上传更多内容。
注意：请注意，clone()，<form>和<iframe>会为id name提供唯一ID }和target分别。 .ashx文件已经过测试并可以正常运行。我很困惑，为什么我不能继续创建新的<form>，<input type="file"/>和<iframe>并添加到列表...

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（也可以通过使用iframe 使用多部分表单），更改了设计，并且它可以正常工作。

如果我不得不猜测，我认为这个问题是在JS中即时创建<form>，<input type="file" />和其他元素时引起的。就好像SharePoint有一个规则或监听器接受了submit()事件的形式，而return false;不允许它到达ASHX处理程序...

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

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

我通过C＃中的context.Request.Files进行迭代，并将它们附加到SharePoint 2007中的关联ListItem。

干杯，
波比

Answer 2

尝试将true传递给clone（）方法。这使数据和事件保持联系。

来源：jQuery

Answer 3

根据我使用可以解决您的问题的jQuery克隆功能，这里是链接http://api.jquery.com/clone/

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

3 个答案: