问jQuery多个动态形式到多个动态iFrames
EN

Stack Overflow用户

提问于 2012-02-13 10:02:05

回答 3查看 1.5K关注 0票数 13

我正在创建一个多文件上传。在我构建文件列表的验证过程中(在提交文件之前)，第一个动态创建的<form>将按预期的方式提交和工作，而另一个动态创建的<form>不会。

还要注意的是，这段代码在SharePoint 2007中，以防任何人可以指出任何限制！谢谢!

用例

用户单击“浏览”并选择一个文件。
<input type="file" />控件是隐藏的。
jQuery将一个<form>封装在<input type="file" />周围，并为响应添加表单引用为target的新<iframe>，并提交表单。
在服务器端，我运行一些验证并发回文件名、大小和一个要删除的选项。
在<iframe> (响应)中，用户可以看到类似于Winter.jpg \ 10 KB \ (x) remove的内容
jQuery clone()是<input type="file" class="uploader" />控件，append()是给<div>的，以防用户想上传更多内容。
注意：记住clone()、<form>和<iframe>分别为id、name和target提供了唯一的ID。.ashx文件已经过测试和工作。我不明白为什么我不能继续创建新的<form>、<input type="file"/>和<iframe>，并将其添加到列表中.

<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..。

呈现的

<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>

forms

sharepoint

iframe

javascript

jquery

数字工厂场景解决方案

帮助企业实现数字化、智能化，解决企业工厂内设备数据采集、设备指标分析、企业信息系统间数据孤岛打通、数据应用困难的问题

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-02-16 07:10:46

尽管如此，这个问题仍然存在，但是我实现了jQuery形式 (它也通过使用iframes来工作w/ multipart )，稍微改变了设计，而且它工作了。

如果我不得不猜测的话，我认为这个问题是在创建JS中的<form>**，** <input type="file" />**，和其他元素时引起的。就好像submit()有一个规则或侦听器正在插入窗体** return false; 事件和return false;，而不允许它访问ASHX处理程序.

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

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

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

干杯,

鲍比

票数 3