Организация очередей асинхронных загрузок файла HTTP

Question

Организация очередей асинхронных загрузок файла HTTP

Существует ли способ поставить загрузки файла в очередь, не обращаясь к Flash или Silverlight, только с умно используемыми формами и JavaScript? Обратите внимание, что загрузка должна быть выполнена асинхронно.

Путем "организации очередей" загрузок я подразумеваю, что, если пользователь пытается загрузить несколько файлов, они не должны быть переданы одновременно, а скорее по одному, в единственном HTTP-соединении.

6

javascript http file-upload

задан dpq 27 February 2010 в 19:39

6 ответов

Accepted Answer

Я не верю, что это возможно сделать на одном HTTP-соединении из-за ограничений спецификации. Однако вы можете получить почти такое же поведение, поместив поля в отдельные формы (будь то HTML или JavaScript) и отправив их по порядку.

Поместите их цели на </code> и используйте событие <code>iframe.onload</code> для запуска следующей формы в списке. </p> <p>Дополнительные примечания:</p> <ul> <li>См. <a href="http://w3schools.com/tags/att_form_target.asp" rel="nofollow noreferrer">this</a> для справки по таргетингу iframe. Обратите внимание, что эта функция не поддерживается в HTML/XHTML Strict. </li> <li>Атрибут <code>form.target</code> должен быть равен атрибуту <code>iframe.name</code>. <code>iframe.id</code> не работает; он вызывает всплывающее окно в IE6 и FF3.5. </li> <li>Рабочий пример загрузки "все сразу" с использованием таргетинга доступен <a href="http://www.webtoolkit.info/ajax-file-upload.html" rel="nofollow noreferrer">здесь</a>. Я немного почистил этот пример и использовал его. Он работает в IE6, а также в любом первоклассном браузере. </li> </ul> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">2</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="17 December 2019 в 04:45 ">17 December 2019 в 04:45 </span> </div> <a class="s-link" href="/questions/471764/organizacija-ocheredej-asinhronnyh-zagruzok-fajla-http#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-772512"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="767772" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> У меня есть достоверные сведения, что <a href="http://www.uploadify.com" rel="nofollow noreferrer"> Uploadify </a> очень хорош. Более того, он изначально поддерживает очереди. Простой пример, который предполагает, что вы уже создали элемент формы «file» с идентификатором «foo» и элемент для использования в качестве очереди с идентификатором «queue». См. <a href="http://www.uploadify.com/documentation/" rel="nofollow noreferrer"> документы </a> для получения дополнительной информации. </p> <pre><code>$("foo").uploadify({ 'uploader' : 'uploadify.swf', 'script' : 'uploadify.php', 'cancelImg' : 'cancel.png', 'auto' : true, 'folder' : '/uploads', 'queue' : "queue" }); </code></pre> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">2</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="17 December 2019 в 04:45 ">17 December 2019 в 04:45 </span> </div> <a class="s-link" href="/questions/471764/organizacija-ocheredej-asinhronnyh-zagruzok-fajla-http#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-767772"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="767774" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Один из вариантов, который я видел раньше, хотя у меня нет ссылки или примера, - это использование iframe. По сути, файлы отправляются в часы iframe и JavaScript, чтобы увидеть, когда этот iframe перезагружается, а затем отправляет следующий. Это некрасиво, и я думаю, что пытался, но не смог заставить его работать в разных браузерах (что мне было нужно в то время, включая IE6). </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">1</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="17 December 2019 в 04:45 ">17 December 2019 в 04:45 </span> </div> <a class="s-link" href="/questions/471764/organizacija-ocheredej-asinhronnyh-zagruzok-fajla-http#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-767774"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="767776" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p>В общих чертах, что нужно сделать:</p> <ul> <li>Функция для динамического добавления форм (в html) с типом ввода как файл. Одна форма будет иметь только одно поле ввода файла. Эти формы будут нашей очередью загрузки файлов. </li> <li>Функция отправки, которая будет отправлять эти формы одну за другой асинхронно. </li> </ul> <p>Это простая логика, которую я могу представить на данный момент [придется писать код, когда я вернусь домой]. </p> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="17 December 2019 в 04:45 ">17 December 2019 в 04:45 </span> </div> <a class="s-link" href="/questions/471764/organizacija-ocheredej-asinhronnyh-zagruzok-fajla-http#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-767776"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="775263" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p>Если вы ищете .Net и, более конкретно, Asp.Net MVC-решение, взгляните на этот пост, <a href="http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html" rel="nofollow noreferrer">http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html</a>. У меня он был закладываем в закладки для справки. </p> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="17 December 2019 в 04:45 ">17 December 2019 в 04:45 </span> </div> <a class="s-link" href="/questions/471764/organizacija-ocheredej-asinhronnyh-zagruzok-fajla-http#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-775263"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="782314" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> этот плагин jquery утверждает, что он работает без использования swf <a href="http://valums.com/ajax-upload/" rel="nofollow noreferrer"> http://valums.com/ajax-upload/ </a> </p> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="17 December 2019 в 04:45 ">17 December 2019 в 04:45 </span> </div> <a class="s-link" href="/questions/471764/organizacija-ocheredej-asinhronnyh-zagruzok-fajla-http#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-782314"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </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/http" class="tag" title="http" rel="tag">http</a> <a href="/questions/tagged/file-upload" class="tag" title="file-upload" rel="tag">file-upload</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'>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> <li><div class='votes-answer green'><span class='vote-count'>37</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89384/javascript-ekvivalenten-printf-string-format" title="JavaScript эквивалентен printf / String.Format">JavaScript эквивалентен printf / String.Format</a> - 31 July 2018 20:09 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82961/kak-luchshe-vsego-obnaruzhit-ustrojstvo-s-sensornym-ekranom-s-pomoschju-javascript" title="Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?">Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?</a> - 15 October 2013 16:24 </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>