Как автоматически открыть тип ввода html5 = "файл"?

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я пытаюсь автоматически открыть диалоговое окно input type = «file» с помощью хука useEffect.Но иногда это работает, а иногда нет.В чем может быть проблема?

Это мой ввод

 <input
  id="loadFromPc"
  type="file"
  accept="image/jpeg, image/png"
  onChange={e => loadFile(e)}
/>

и это мой хук

  useEffect(() => {
    const { search } = window.location;
    if (search amp;amp; queryString.parse(search).userSelect === 'upload_photo') {
      setTimeout(() => {
        console.log('[setTimeout]');
        document.getElementById('loadFromPc').click();
      }, 1000);
    }
  }, []);

1. возможно, search amp;amp; queryString.parse(search).userSelect === 'upload_photo' имеет значение false — зачем вам setTimeout? работает ли это чаще, если время ожидания больше?

2. Иногда работает, иногда нет. Вы принимаете только файлы с расширением ‘jpeg и png’. Итак, если вы загружаете другие файлы расширений, это не сработает.

3. console.log('[setTimeout]') эта часть всегда работает!!!. Проблема в событии click(). Я добавил setTimeout, чтобы убедиться, что мой DOM полностью готов. Потому что мой компонент отображает много раз. Это требует некоторых реквизитов. If mention sometimes working sometimes not i mean opening dialog, not extensions]

Ответ №1:

Это моя функция LoadFile.

   function loadFile(e) {
    removePopup({
      name: 'image_picker'
    });

    const ff = e.target.files[0];
    const reader = new FileReader();

    reader.onload = () => {
      const image = new Uint8Array(reader.result);

      addLayer(image, image_index, export_size, 'photos', tariff !== null);
    };
    reader.readAsArrayBuffer(ff);
  }

И у меня нет никаких проблем с загрузкой файла.Это работает нормально

Ответ №2:

Если проблема связана с множественным отображением, вы можете изменить условие перехвата:

 if (search amp;amp; queryString.parse(search).userSelect === 'upload_photo' amp;amp; document.getElementById('loadFromPc')) {
      setTimeout(() => {
        console.log('[setTimeout]');
        document.getElementById('loadFromPc').click();
      }, 1000);

и добавьте проверку элемента, если он уже полностью загружен, перед запуском щелчка.

Также попробуйте проверить страницу часто задаваемых вопросов о перехватах и страницу введения к перехватам с эффектом React или Правила использования перехватчиков на странице документов React.

1. console.log(‘[setTimeout]’) эта часть всегда работает!!!. Проблема в событии click(). Я добавил setTimeout , чтобы убедиться, что мой DOM полностью готов. Потому что мой компонент отображает много раз. Это требует некоторых реквизитов.

2. когда это не работает, появляется ли ошибка? Если да, пожалуйста, добавьте это в вопрос. Я предположил, что часть щелчка никогда не выполнялась, когда вы сказали «иногда это работает, а иногда нет

3. Не делайте этого. Я не получаю никакой ошибки!!! Я также делаю это console.log(document.getElementById('loadFromPc')) , и он выдает мне мои входные данные. Всегда.

4. Можете ли вы показать код для loadFile функции? Содержит ли он e.preventDefault() вызов функции?