jQuery Multiple Dynamic Forms to Multiple Dynamic iFrames

Question

jQuery Multiple Dynamic Forms to Multiple Dynamic iFrames

Я создаю многофайловую загрузку. В процессе проверки, когда я строю список файлов (до их отправки), первая динамически созданная

отправляется и работает как ожидалось, но другие динамически созданные не отправляются. Это не работает в IE7+ или FireFox...

Также следует отметить, что этот код находится в SharePoint 2007 на случай, если есть какие-либо ограничения, на которые кто-нибудь может указать! Спасибо!

Пример использования

Пользователь нажимает кнопку browse и выбирает файл...
Элемент управления скрыт.
jQuery оборачивает вокруг и добавляет новый </code>, на который форма ссылается как на <code>target</code> для ответа, и отправляет форму. </li> <li>На стороне сервера я выполняю некоторую проверку и отправляю обратно имя файла, размер и возможность удаления. </li> <li>В <code><iframe></code> (ответ) пользователь видит что-то вроде <strong>Winter. jpg | 10 KB | (x) remove</strong></li> <li>jQuery <code>clone()</code>'s the <code><input type="file" class="uploader" /></code> control and <code>append()</code>'s it to the <code><div></code> in case the user desires to upload more. </li> <li><strong>Примечание:</strong> помните, что <code>clone()</code>, <code><form></code> и <code><iframe></code> присваиваются уникальные идентификаторы для <code>id</code>, <code>name</code> и <code>target</code> соответственно. Файл <code>.ashx</code> был протестирован и работает. Меня смущает, почему я не могу продолжать создавать новые <code><form></code>s, <code><input type="file"/></code>'s и <code><iframe></code>'s и добавлять к списку... </li> </ol> <p><strong>HTML</strong> </p> <pre><code><div id="files"> <div class="field"> <input id="file" type="file" name="file" class="uploader" value="Browse..." /> </div> </div> </code></pre> <p><strong>Javascript</strong><br /> <em>Извините, код может быть немного небрежным - пробы и ошибки... </em></p> <pre><code><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> </code></pre> <p>Я подумал, что вы, ребята, можете спросить, так что вот отрендеренный HTML... </p> <p><strong>Rendered HTML</strong> </p> <pre><code><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> </code></pre> </div> <div class="votes-question"> <div class="vote-count" itemprop="upvoteCount">13</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="tags"> <a href="/questions/tagged/javascript" class="tag" title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="tag" title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/forms" class="tag" title="forms" rel="tag">forms</a> <a href="/questions/tagged/sharepoint" class="tag" title="sharepoint" rel="tag">sharepoint</a> <a href="/questions/tagged/iframe" class="tag" title="iframe" rel="tag">iframe</a> </div> <div class="clearfix"></div> <div class="action-time"> задан pixelbobby <span title="16 February 2012 в 12:44 ">16 February 2012 в 12:44 </span> </div> <a class="s-link" href="/questions/602083/jquery-multiple-dynamic-forms-to-multiple-dynamic-iframes" title="поделиться">поделиться</a> </div> </div> <div style="height:100px;margin:10px 0px;" class=""> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block;height:100px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="answers" id="answers"> <h2 class="pull-left"><span itemprop="answerCount">0</span> ответов</h2> <div class="clearfix"></div> <div class="answer-pager"> <div class="pagination"> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/javascript" class="tag" title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="tag" title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/forms" class="tag" title="forms" rel="tag">forms</a> <a href="/questions/tagged/sharepoint" class="tag" title="sharepoint" rel="tag">sharepoint</a> <a href="/questions/tagged/iframe" class="tag" title="iframe" rel="tag">iframe</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>99</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/131610/skrytye-funkcii-javascript-zakrytyj" title="Скрытые функции JavaScript? [закрытый]">Скрытые функции JavaScript? [закрытый]</a> - 23 May 2017 02:10 </li> <li><div class='votes-answer green'><span class='vote-count'>70</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82769/chto-takoe-javascript-versija-sleep" title="Что такое JavaScript-версия sleep ()?">Что такое JavaScript-версия sleep ()?</a> - 17 March 2018 18:15 </li> <li><div class='votes-answer green'><span class='vote-count'>61</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90102/kak-ja-mogu-otformatirovat-chisla-v-vide-stroki-valjuty-v-javascript" title="Как я могу отформатировать числа в виде строки валюты в JavaScript?">Как я могу отформатировать числа в виде строки валюты в JavaScript?</a> - 26 May 2019 04:14 </li> <li><div class='votes-answer green'><span class='vote-count'>59</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/127174/chto-luchshij-sposob-sostoit-v-tom-chtoby-vynudit-sebja-k-osnovnomu-vi-zakrytyj" title="Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]">Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]</a> - 9 April 2009 03:44 </li> <li><div class='votes-answer green'><span class='vote-count'>44</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82794/kakoj-sintaksis-javljaetsja-predpochtitelnym-dlja-opredelenija-perechislenij-v-javascript-zakryto" title="Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]">Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]</a> - 26 December 2018 06:38 </li> <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>