Вот моя попытка выполнить ваш запрос на тот случай, если вы искали альтернативы. Этот метод просто обрабатывает ошибки как допустимые результаты и кодируется аналогично

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

<div class="preview-image-container">

  <input type="file" name="File" id="File" accept="image/*" 
         class="image-url form-control" style="display:none;" />

  <div class="preview-image-dummy"></div><img class="preview-image-url" />
  <div class="preview-image-instruction">
    <div class="preview-image-btn-browse btn btn-primary">Select file</div>
    <p>or drop it here.</p>
  </div>

</div>

Вот скрипка с MCVE Глядя на вывод

. Пользователь сбрасывает файл в preview-image-container Гораздо лучше, я думаю, было бы что-то вроде этого:

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

Как вы можете видеть из MCVE, меня интересует только использование jQuery или чистого JavaScript без дополнительных библиотек.

Эта проблема проявляется, особенно в старых версиях Internet Explorer до 8. dropzone.js может быть использован, он не соответствует моим требованиям и потребует значительного времени для настройки его внешнего вида. Более того, dropzone.js имеют определенные требования к конфигурации, которые не могут быть выполнены в моем приложении ASP.NET.


Есть похожий вопрос, но нет правильного ответа:
Как установить объект файла во входной файл в форме в HTML?

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

помечены , таких как guest271314 Javascript Пользователи с вопросами Javascript можно в одиночку закрыть в качестве дубликатов и открывают их по мере необходимости. Попробуйте:

Этот вопрос был задан ранее и уже имеет ответ. Если эти ответы не полностью отвечают на ваш вопрос, пожалуйста, задайте новый вопрос Глядя на вывод

Отказ от ответственности: Исправлено по состоянию на декабрь 2017 года и только для современных браузеров.


TL ; ДР: Да, теперь ты можешь!

* если у вас есть объект dataTransfer или FileList

Ранее , программное изменение поля файлов input[type=file] было отключено из-за устаревших уязвимостей безопасности, которые исправлены в современных браузерах.

Последний из основных браузеров (Firefox) недавно позволил нам установить файлы для поля входного файла. Согласно тестированию W3C , вы уже можете сделать это в Google Chrome!

Соответствующий снимок экрана и текст, цитируемый из MDN:

enter image description here

Вы можете установите , а также получите значение HTMLInputElement.files во всех современных браузерах.
Совместимость с исходным кодом и браузером, см. MDN

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

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');
  
  fileInput.files = e.dataTransfer.files;
});
body {
  font-family: Roboto, sans-serif;
}

body.dragging::before {
  content: "Drop the file(s) anywhere on this page";
  position: fixed;
  left: 0; width: 100%;
  top: 0; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  background-color: rgba(255, 255, 0, .3);
  pointer-events: none;
}

button, input {
  font-family: inherit;
}

a {
  color: blue;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> 

  <title>JS Bin</title>
</head>
<body>
  
  <h1>Drag and drop files into file input</h1>
  
  <p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
  
  <p>
    <input type="file">
  </p>

</body>
</html>

Важное примечание:

Вы можете сделать это, только если у вас есть существующий объект FileList или dataTransfer, который вы можете установить на элемент входного файла (так как метод установки НЕ принимает строки простого текста).

Для получения дополнительной информации см. Ответ Кайидо здесь: Как установить объекты File и свойство length в объекте FileList, где файлы также отражаются в объекте FormData?


Теперь, чтобы ответить на ваш первоначальный вопрос, это должно быть так просто:

document.querySelector('.preview-image-instruction')
    .addEventListener('drop', (ev) => {
        ev.preventDefault();
        document.querySelector('.image-url').files = ev.dataTransfer.files;
    });