Существующие асинхронные запросы не выполняются с сетевой ошибкой, когда средство выбора файлов / изображений открывается в iOS Safari - PullRequest
Новая
       23

Существующие асинхронные запросы не выполняются с сетевой ошибкой, когда средство выбора файлов / изображений открывается в iOS Safari

0 голосов
/ 02 июля 2018

У меня есть проект, в котором мне нужно загружать несколько изображений асинхронно. Он работал отлично везде (Chrome, Firefox, MacOS Safari, Android Chrome, iOS Safari на симуляторе iOS под управлением 11.4). Однако на моем iPhone с использованием iOS Safari (и нескольких других айфонов, на которых я пытался запустить 11.4) существующие запросы не выполнялись, когда я открывал средство выбора изображений / файлов.

С тех пор я перевел проблему в более простой код: 

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="/javascripts/main.js"></script>
  </head>
  <body>
    <p>Upload Progress: <span id="status">Not Started</span></p>
    <p>Blob Upload: <button id="blobUpload">Upload Blob</button></p>
    <p>File Input: <input type="file" /></p>
  </body>
</html>

Это main.js: 

$(document).ready(() => {
  $("#blobUpload").click(() => {

    const status = document.getElementById("status");
    status.innerHTML = "Started";

    // Create an array about 2mb in size (similar to an image);
    // and append it to a form data object
    const intArray = new Uint8Array(2000000);
    const blob = new Blob([intArray]);
    const formData = new FormData();
    formData.append('file', blob);

    const request = new XMLHttpRequest();

    request.upload.addEventListener('progress', (ev) => {
      const percent = Math.round(ev.loaded / ev.total * 100);
      status.innerHTML = percent + '%';
    }, false);

    request.upload.addEventListener('error', (ev) => {
      status.innerHTML = '<span style="color: red">Network Error</span>';
    });

    request.open('POST', '/upload', true);
    request.send(formData);
  });
});

Если я нажму кнопку «Загрузить BLOB-объект», а затем больше ничего не сделаю, это будет работать 100% времени и никогда не даст сбой. Однако, если я нажимаю кнопку загрузки большого двоичного объекта, то во время загрузки я нажимаю на вход файла (который абсолютно не связан со всем остальным), выбираю один из пунктов меню (Снять фото или видео, Библиотека фотографий или Обзор), затем либо выберите что-то, или сделайте фотографию, или просто нажмите «Отмена», чтобы вернуться, загрузка BLOB-объекта завершится примерно 1/3 времени с сообщением «Не удалось загрузить ресурс: сетевое соединение было потеряно». ошибка. Неважно, что загружается (изображение, блоб или что-то еще).

Вот видео, показывающее, что происходит.

Прошло 2 дня, чтобы отладить это, и я не нашел НИЧЕГО интересного в моих исследованиях и, поверьте мне, я пытался. Любая помощь будет оценена. Начинаю верить, что это может быть просто ошибкой в ​​Safari.

Ответы [ 2 ]

0 голосов
/ 13 июля 2018

Когда вы запускаете средство выбора файлов и т. Д. И заставляете его работать, вы получаете пустое поле файла в форме?

В Safari есть известная ошибка , которая приведет к сбою загрузки XMLHttpRequest, если в форме есть пустое поле файла.

0 голосов
/ 02 июля 2018

Ответ здесь может заключаться не в исправлении ошибки, а в улучшенном UI / UX.

Во время загрузки файла вы можете отключить кнопку выбора файлов. Вы также можете иметь кнопку отмены рядом с (отключенной) кнопкой выбора файла, которая отображается во время загрузки чего-либо, на тот случай, если пользователь решит отменить загрузку.

А если вам нужно загрузить несколько файлов, пусть все они будут сложены, и вы можете запустить одну загрузку, которая последовательно загружает все файлы.

...