Почему работает установка значения элемента файла типа ввода с помощью querySelecter, а getElementById - нет? - PullRequest
Новая
       20

Почему работает установка значения элемента файла типа ввода с помощью querySelecter, а getElementById - нет?

1 голос
/ 30 сентября 2019

Недавно я столкнулся с проблемой с элементом файла типа ввода, который перестал отображать диалоговое окно выбора файла, но не отображал никаких ошибок в отладчике / коде инспектора. Элемент использует метод jQuery wrap..reset..unwrap для «очистки» элемента. Тем не менее, около шести месяцев назад все это работало нормально в Chrome, Firefox, Edge и Internet Explorer, но теперь ничего, поэтому что-то изменилось.

Я скопировал элемент типа ввода и обработку событий click and changeкод, используемый для обработки файлов, выбранных с помощью этого элемента, на новой веб-странице на codepen , чтобы упростить демонстрацию и работу с ним. Извините, это довольно долго, но часть, которая очищает элемент файла входного типа непосредственно перед тем, как заставить элемент отображать диалоговое окно выбора файла, находится прямо в верхней части кода javascript в строках 9 и 10, поэтому не трудно увидеть. 

<form id="fileImageForm" style="display: inline;">
  <input type="button" id="button" value="Get pictures" />
  <input type="text" id="text" style="width: 200px;" />
  <input type="file" id="fileInput" class="file"
         accept="image/jpeg, ... ,image/tiff" multiple
         style="display: none;" />
  <img id="fileImage" />
</form>

<script>
  document.getElementById( 'button' )
  .onclick = function() {

               //
               // Reset the input file element so the file selection
               // dialog shows everytime the element is clicked ...
               //

/* line 9 */   document.getDocumentById( 'fileInput' ) .value  = '';

               // Or

/* line 10 */  document.querySelector( '.file' ) .value  = '';

               // Click the input file element ...

               document.getElementById( 'fileInput' ).click();
            };

  //
  // When the user chooses one or more files with the input file element,
  // the change event 'fires' and this function is called to validate and
  // preview the selected image(s) ...
  //

  function fileInputChange( event ) { ... }

  // Attach the change even to the input file element ...

  document.getElementById( 'fileInput' )
  .addEventListener( 'change', fileInputChange );

  ⫶
</script>

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

document.getDocumentById( 'fileInput' ) .value  = '';
document.querySelector( '.file' ) .value  = '';

Поскольку я не хотелработая с jQuery на странице codepen, я выбрал два наиболее распространенных javascript-решения, которые только смог найти.

Хотя оба они используют разные методы для «поиска» элемента файла входного типа, «очистка»'вызвано прямым присвоением пустой строки значению элемента. Оба способа прекрасно работают в коде ручки во всех текущих версиях основных браузеров и кажутся довольно простыми.

Часто используемый метод jQuery wrap-reset-unwrap, который не показан, выполняет свою работу с помощьюзаключая файл элемента входного типа во временный элемент формы, вызывая метод сброса формы для косвенного «очистки» элемента ввода, а затем удаляя временный элемент формы, но, как я уже сказал выше, это средство очистки элемента ввода перестало работать дляменя в текущей версии Chrome, по крайней мере, в моем веб-приложении, возможно, потому что обработчики событий, назначенные для элемента, повреждены из-за обертывания и разворачивания элемента формы при щелчке каждого элемента ввода, возможно, из-за проблемы с памятьюне знаю.

Итак, почему, если в текущей версии всех основных браузеров работает метод прямого присвоения значений для очистки элемента ввода, я должен использовать метод jQuery, тем более что яиспытываете проблемы с этим, пока я полностьюотладить это?

Спасибо.

...