Arhn - архитектура программирования

javascript или jquery скачать большой файл как URI

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

В настоящее время я использую следующий код (не запускается для вас, но вы можете понять идею), в котором я добавляю текстовое поле с именем файла, затем скрытую текстовую область, содержащую весь текст, необходимый для загрузки стиля json, а затем это связано к функции, которая пытается загрузить URI.

Интересно, что при запуске в Chrome я получаю страницу с сообщением, что URI слишком длинный и он не будет работать и т. д., но файл все равно загружается.

"Отправленный URI слишком велик! Длина запрошенного URL превышает ограничение емкости для этого сервера. Запрос не может быть обработан. Если вы считаете, что это ошибка сервера, обратитесь к веб-мастеру."

В любом случае, раздражает вот что: страница, которая позволяет эти загрузки, использует сообщение/получение с предыдущей страницы, поэтому кнопка «Назад» не может использоваться, поскольку она дает нам:

«Подтвердить повторную отправку формы Для правильного отображения этой веб-страницы требуются данные, которые вы ввели ранее. Вы можете отправить эти данные еще раз, но тем самым вы повторите любое действие, которое эта страница ранее выполняла».

страница. Мне бы хотелось, чтобы эти загрузки URI появлялись на новой вкладке, поэтому кнопка «Назад» не нужна, хотя добавление целевого пробела не помогло.

Также интересно - как показано выше, у меня также есть функция «загрузить все», которая работает для меня, запуская вещи локально на сервере xampp, в google chrome, однако те, кто создает приложение, сообщают, что кнопка не работает для них ( они на Mac используют сафари, у меня еще не было возможности увидеть это лично и собрать информацию - так что, хотя я не ОЖИДАЮ ответа на этот вопрос с моей ограниченной информацией, я надеюсь, что у кого-то может быть идея!)

КОД:

< script >
  function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    // I tried addin this but no new tab appeared!
    //element.target = "_blank:";
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
  }

function download_all() {
  var nameElements = document.getElementsByName("name");
  var valueElements = document.getElementsByName("text");

  for (i = 0; i < nameElements.length; i++) {
    console.log(nameElements[i].value);
    console.log(valueElements[i].value);

    download(nameElements[i].value, valueElements[i].value);
  }
} <
/script>

echo "
<form onsubmit=\ "download(this['name'].value, this['text'].value)\" class=\ "form-group\">"; echo "<label for=\ "name\">Download Title</label>"; echo "<input type=\ "text\" name=\ "name\" size=\ "40\" value=\ "" . $m[ 'name'] . ".json" . "\" class=\ "form-inline\">"; //hidden=\"hidden\"> after text echo "<textarea name=\ "text\" hidden=\
    "hidden\">" . $json_meal_data . "</textarea>"; echo "<input type=\ "submit\" value=\ "Download\" class=\ "btn-primary\">"; echo "</form>"; echo "<br>"; echo "<br>";

Также определенно стоит отметить, что я включил функцию «Загрузить все» в приведенные выше фрагменты. Как ни странно, при запуске этой загрузки в Chrome загружаются все файлы, а при запуске в Safari загружается только 1 файл.


  • Вы пытались поместить данные в большой двоичный объект и загрузить его? Создание URL-адреса из большого двоичного объекта с помощью URL.createObjectURL. Что касается загрузки всех, некоторые браузеры, такие как Chrome, блокируют несколько последовательных загрузок, пользователь должен разрешить это, чтобы он работал (в chrome вы получаете к нему доступ, щелкнув значок в конце адресной строки) 11.01.2018
  • Вы можете предложить файл .zip для загрузки, который может включать в себя несколько файлов и папок, см. несколько ссылок для загрузки в один zip-файл перед загрузкой javascript 11.01.2018
  • @PatrickEvans Мне нужно проверить браузер и загрузить все - как уже упоминалось, я еще не видел, чтобы он терпел неудачу лично, так как он работает для меня в chrome в моей среде разработки. Я не пробовал помещать его в блоб и использовать этот метод - я никогда не слышал об этом раньше. Я могу попробовать - но имейте в виду, что эти файлы весят около 25 МБ каждый - не уверен, сработает это или нет? 12.01.2018
  • @ guest271314 Глядя на это, судя по нескольким взглядам, похоже, что файлы должны существовать? Нет исходных файлов для загрузки, файл создается при загрузке страницы и представляет собой просто набор текста, хранящегося в текстовой области. 12.01.2018
  • Не уверен, в чем проблема? Чего вы пытаетесь достичь? Вы можете прочитать элемент .textContent из <textarea>, используя ReadableStream, а затем загрузить файл, см. Как решить Uncaught RangeError при загрузке json большого размера 12.01.2018
  • @guest271314 guest271314 Получение одного файла для загрузки не является проблемой - как я упоминал выше, это работает (более или менее, хотя я изучу этот метод, который вы опубликовали, и посмотрю, улучшит ли он его) Проблема в том, что загрузка изменяет текущая страница - и вы не можете вернуться, так как страница не перезагрузит опубликованные параметры поиска. Я хочу, чтобы загрузка открывалась в новой вкладке, но добавление целевого _blank не приводит к этому - другая проблема заключается в загрузке нескольких файлов одновременно (что работает для меня в хроме, но не для пользователя в сафари), чего я сам не видел но так может быть легко 12.01.2018
  • Файлы не обязательно должны существовать в файловой системе, вы можете сгенерировать их, как я уже упоминал, поместив их в большой двоичный объект, то есть new Blob([YourContentVariable],{type:'MimeTypeGoesHere like text/plain'});, а затем используйте createObjectURL, чтобы получить URL-адрес, который вы используете для href 12.01.2018
  • @PatrickEvans, да, мои другие ответы были в гостях :) Как уже упоминалось, я проверю это на этих выходных! Мой текущий метод загрузки файла (не с использованием большого двоичного объекта, а с помощью URI) работает, хотя, похоже, он отказывается запускать загрузку в новой вкладке, как я хочу. Надеюсь, ваш метод здесь сделает эту работу! 13.01.2018
  • @PatrickEvans Пробовал это, все еще с той же проблемой. Используя это, в некоторых случаях он просто не загружает файл вообще. В других я могу загрузить его, но у меня тот же сценарий, что и раньше - он меняет мою текущую страницу на URI. Слишком длинное предупреждение, которое портит результаты поиска, на которых я был. использование window.open открывает новую вкладку, но файл не загружается (он просто показывает текст json на веб-странице) и ВСЕ ЕЩЕ меняет исходное местоположение страницы/вкладок =( 14.01.2018
  • Вы не препятствуете отправке формы, следовательно, ваша страница меняется. Что касается отказа от загрузки, то вы, вероятно, не реализовали его правильно или ваш браузер не поддерживает атрибут загрузки, см. этот пример реализации: jsfiddle.net/23ztyo6c 14.01.2018
  • Ах, я думал, что ваша первая ссылка будет решением, но даже предотвращая отправку, она все равно меняет мою страницу на слишком длинную страницу с ошибкой 414 Request-URI. И да, RE скрипка, когда я устанавливаю ujp таким образом, она загружается, но меняет страницу на меня на проблему с uri. Это довольно расстраивает ха 15.01.2018

Ответы:


1

Вы передали слишком длинный URL в XAMPP. XAMPP означает Apache. В Apache максимальная длина URL-адреса составляет около 4000 символов, после чего Apache выдает ошибку «413 Entity Too Large».

Я согласен с @PatrickEvans, лучше использовать URL.createObjectURL. URL.createObjectURL() можно использовать для создания и анализа URL-адресов. В частности, URL.createObjectURL() можно использовать для создания ссылки на файл или большой двоичный объект. В отличие от URL-адреса данных в кодировке base64, он не содержит фактических данных объекта — вместо этого он содержит ссылку.

Самое приятное в этом то, что это действительно быстро. Раньше нам приходилось создавать экземпляр FileReader и считывать весь файл как URL-адрес данных base64, что занимало много времени и памяти. С createObjectURL() результат доступен сразу, что позволяет нам делать такие вещи, как чтение данных изображения на холст.

Как вы можете видеть в следующей демонстрации. Две ссылки одинаковы. Но если вы проверите в Without createObjectURL ссылке, атрибут href имеет too large to edit, но в ссылке With createObjectURL вы можете отредактировать ее, потому что для ее создания я использовал URL.createObjectURL().

Онлайн-демонстрация (jsFiddle)

20.01.2018
  • Должно быть, я перепробовал любую другую комбинацию предложений, которые я получил — от предотвращения значений по умолчанию для ссылок до создания BLOB-объекта, моего json и т. д. — но это первый раз, когда мне вручили пример скрипки, который работал для построения. В моих попытках комбинации я пробовал: var blob = new Blob([text]);saveAs(blob, filename); с файловой заставкой - но я не думаю, что создал свой большой двоичный объект так, как должен, - и я все равно буду менять страницы. С вашей скрипкой я кое-где подправил ее, чтобы она соответствовала моей установке. так что СПАСИБО - наконец-то это работает :) 20.01.2018
  • @aescript Я рад, что смог вам помочь :) 20.01.2018
  • Наслаждайтесь своей щедростью! 20.01.2018

  • 2

    Вам не нужно прикреплять элемент к документу. И избегайте использования base64, потому что он на 37% больше, чем Blob.

    function download(filename, text) {
      var element = document.createElement('a');
      var blob = new Blob([text], {type: "octet/stream"})
      var url = URL.createObjectURL(blob);
      element.setAttribute('href', url);
      element.setAttribute('download', filename);
      element.click();
    }
    
    16.01.2018
  • Не будет ли этот триггер защищать браузер от загрузки, не инициированной пользователем? Я думаю, что это тревожный сигнал в браузерах. вам следует обновить, чтобы покрыть, от чего это может быть защищено, и, возможно, привести пример использования onMouseDown, чтобы настроить это на элементе, поэтому, когда браузер запускает мышь и щелчок, он начинает загрузку. 18.01.2018

  • 3

    Скорее всего, вы фактически заполняете URL-адрес браузера и отправляете запрос GET на сервер.

    Запросы GET ограничивают объем данных, которые они могут передать на сервер, поэтому URI слишком длинный. (POST, напротив, допускает гораздо большую полезную нагрузку и ограничивается только настройками вашего сервера)

    Дополнительную информацию об ограничениях длины привязки браузера можно найти здесь:

    Какова максимальная длина URL-адреса в разных браузеры?

    https://weblogs.asp.net/mschwarz/post-vs-get

    18.01.2018
  • Зачем вообще кому-то использовать GET с большой полезной нагрузкой? Не было бы более разумно использовать POST, если они все равно отправляют что-то с полезной нагрузкой? 19.01.2018
  • Потому что у некоторых разработчиков нет опыта в разработке своих API? Некоторые запросы GET могут включать условия фильтра. Подумайте, google.com, что у них есть параметр строки запроса q для вашего запроса на получение при запуске поиска. Вы можете поместить туда огромный поисковый запрос или большое количество требований. 26.01.2018
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..