Диалоговое окно загрузки исчезает сразу же после появления на веб-странице, которую я создаю. - PullRequest
Новая
       6

Диалоговое окно загрузки исчезает сразу же после появления на веб-странице, которую я создаю.

0 голосов
/ 08 декабря 2018

Я пытаюсь использовать elninotech / uppload , так как похоже, что он будет делать то, что я хочу (дайте мне портативную, простую в использовании, мощную кнопку загрузки файла).Однако, когда я нажимаю на кнопку, диалоговое окно загрузки появляется и исчезает (нажмите pause, в отладчике, перед нажатием кнопки, затем один шаг. На втором шаге появляется диалоговое окно, на третьем шаге оно исчезает).

Что такоеЯ делаю не так? 

<html>
  <body>
    <form class="profile">
      <button id="uploadButton">upload image</button>
    </form>
    <img id="profilePicImage"/>
  </body>
  <script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
  <script>
const profilePicture = new Uppload({
    value: "https://randomuser.me/api/portraits/men/17.jpg",
    bind: ["#profilePicImage"],
    call: ["form.profile button#uploadButton"],
    //endpoint: "https://example.com/upload_backend",
    allowedTypes: "image"
});

  </script>
</html>

1 Ответ

0 голосов
/ 10 декабря 2018

Я нашел очень сложный пример на их сайте https://elninotech.github.io/uppload/ Я потратил некоторое время на отладку и просмотр их кода.Это то, что я нашел.

Элемент может иметь атрибут data-uppload-button, чтобы пометить его как кнопку загрузки.Я не знаю, как это может работать с более чем одной кнопкой.

Кнопка по умолчанию в форме дозы не работает (это вызывает проблему, описанную в вопросе).Изменение кнопки на диапазон работает (но не является интуитивно понятным для пользователя).Изменение формы на div, работает.Изменение типа кнопки на кнопку работает.

Из системы отслеживания проблем git-hub https://github.com/elninotech/uppload/issues/21#issuecomment-445997614

Если у вас есть элемент формы HTML без метода, по умолчанию используется значениеПОЛУЧИТЬ.Если в нем есть кнопка, форма предполагает, что это кнопка отправки, и, следовательно, обновляет страницу при ее нажатии.Это означает, что если у вас есть кнопка без type = "button", страница обновляется.Это означает, что исходное состояние отменяется, и вы не видите Uppload открытым.Вот почему вам нужна кнопка type = "button", которую вы не хотите отправлять на страницу.В качестве альтернативы вы можете использовать event.preventDefault () и возвращать false для события onSubmit в форме.

Вот рабочий код: 

<html>
  <body>
    <form class="profile">
      <button type="button" id="uploadButton">upload image</button>
    </form>
    <img id="profilePicImage"/>
  </body>
  <script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
  <script>
const profilePicture = new Uppload({
    value: "https://randomuser.me/api/portraits/men/17.jpg",
    bind: ["#profilePicImage"],
    call: ["div.profile button#uploadButton"],
    //endpoint: "https://example.com/upload_backend",
    allowedTypes: "image",

    services: ["upload", "camera", "link"],
    crop: {
        startSize: [100,100, "%"]
    }
});

  </script>
</html>

У меня нетпока тестируется с работающей конечной точкой (сервером)

...