Добрый день! Чтобы загрузить файл с стороннего ресурса и вставить его в форму с помощью JavaScript, можно воспользоваться объектом `FormData`, который позволяет работать с данными форм, в том числе с файлами.
Вот примерный пошаговый алгоритм, который поможет вам добиться желаемого результата:
1. Используйте `fetch` для загрузки файла с удаленного сервера.
2. Создайте объект `Blob` из полученного файла.
3. Создайте объект `File` и добавьте его в объект `FormData`.
4. Отправьте данные формы на сервер по нажатию кнопки "Сохранить".
Вот пример кода, иллюстрирующий этот процесс:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Загрузка файла</title>
</head>
<body>
<form id="myForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file">
<button type="button" id="loadFile">Загрузить файл</button>
<button type="submit">Сохранить</button>
</form>
<script>
document.getElementById('loadFile').addEventListener('click', () => {
const fileUrl = 'https://example.com/path/to/your/file.jpg'; // URL файла
fetch(fileUrl)
.then(response => {
if (!response.ok) {
throw new Error('Сеть ответила с ошибкой: ' + response.statusText);
}
return response.blob(); // Получаем blob
})
.then(blob => {
const file = new File([blob], 'downloadedFile.jpg', { type: blob.type }); // Создаем файл
const input = document.getElementById('fileInput');
const dataTransfer = new DataTransfer(); // Для поддержки вставки файла в input
dataTransfer.items.add(file); // Добавляем файл в DataTransfer
input.files = dataTransfer.files; // Присваиваем input файлы
})
.catch(error => console.error('Ошибка при загрузке файла:', error));
});
document.getElementById('myForm').addEventListener('submit', (event) => {
event.preventDefault(); // Предотвращаем стандартное поведение формы
const formData = new FormData(event.target); // Собираем данные формы
// Отправка данных на сервер
fetch('https://example.com/upload', {
method: 'POST',
body: formData
})
.then(response => {
if(response.ok) {
console.log('Файл успешно загружен!');
} else {
throw new Error('Ошибка при загрузке файла');
}
})
.catch(error => console.error(error));
});
</script>
</body>
</html>
```
### Пояснения:
- **fetch**: Используется для загрузки файла с указанного URL. Метод `response.blob()` получает содержимое ответа как `Blob`.
- **File**: Конструктор `File` позволяет создать новый объект файла с необходимыми параметрами.
- **DataTransfer**: Используется для управления файлами в поле ввода, так как `input.files` недоступен для обычного присваивания.
- **FormData**: Собирает все данные формы, включая загруженные файлы, для отправки на сервер.
Не забудьте заменить `https://example.com/path/to/your/file.jpg` на реальный URL вашего файла, а также `https://example.com/upload` на URL, куда вы планируете отправить данные формы.