jQuery多个动态形式到多个动态iFrames
我正在创建一个多文件上传。在我构建文件列表的验证过程中(在提交文件之前)，第一个动态创建的<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>回答 3
Stack Overflow用户
发布于 2012-02-16 15: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中。
干杯,
鲍比
Stack Overflow用户
发布于 2012-02-14 19:50:30
尝试将true传递给克隆()方法。这会使数据和事件绑定。
来源：jQuery
Stack Overflow用户
发布于 2012-02-22 10:41:39
根据我使用的jQuery克隆函数可以解决您的问题，下面是链接http://api.jquery.com/clone/
https://stackoverflow.com/questions/9265494
复制相似问题
腾讯云开发者
