1

Как мне, зная ссылку на файл, (например, http://host/filepath/filename.png) загрузить его в input[file] для отправки на сервер?

2
  • 1
    в таком случае правильно будет передать ссылку на файл в виде текста(<input type="text">) а на бэке загрузить уже средствами серверной части. Для php например $file = file_get_contents($_POST['file_link']);
    – Arendach
    9 дек 2019 в 9:01
  • @Arendach я бы так и сделал, если бы не тот факт, что отправить мне нужно в админку django, следовательно что бы изменить сохранение файла, нужно расширять класс django, что то же несёт за собой изрядную порцию геморроя 9 дек 2019 в 18:13

2 ответа 2

3

Благодаря ответам @ТрипольскийПётр и ещё некоторым ресурсам я смог решить появившуюся проблему. Решение выглядит следующим образом: `

//Функция для получения объекта Blob

    async function fetchImage(url){
        const data = await fetch(url);
        console.log(data);
        const buffer = await data.arrayBuffer();
        const blob = new Blob([buffer], { type: "image/png"});
        return blob;
    }

С помощь. этой функции я получаю файл по ссылке на него.

//Добавление файла в input['file']
let url = 'http://host/filepath/filename.png'
let nameFile ='file.png';
let inputForm = document.getElementById('id');
const blob = await fetchImage(url);
const file = new File([blob],nameFile)
const dT = new ClipboardEvent('').clipboardData || new DataTransfer();
dT.items.add(file);
inputForm.files = dT.files;

`

Таким образом я отправляю файл в форме, получая его с другого ресурса.

1
  • 1
    У меня была задача загрузить изображение, со своего же сервера в input type file. Тоже воспользовался вашим подходом, чтобы не трогать бэк. Конечно удивился, что изображение, которое есть у тебя же на странице нельзя просто добавить в input, а надо заново качать и через буфер обмена вставлять.
    – zardoz
    20 мая 2022 в 19:03
1

Вполне возможно. Сохраните файл как index.html на локальный жесткий диск и откройте как файл без веб сервера, чтобы не получить ошибку CORS Origin.

<body>
    <script>
        (async function() {
            const fetchImage = async (url) => {
                const data = await fetch(url);
                const buffer = await data.arrayBuffer();
                const blob = new Blob([buffer], { type: "image/png"});
                return blob;
            }
            const sendImage = (blob, url = "http://foo.com/submitform.php",  name = "image.png") => {
                const request = new XMLHttpRequest();
                const file = new File([blob], name)
                const data = new FormData();
                request.open("POST", url);
                data.append("image", file, name);
                request.send(data);
            }
            const showImage = (blob) => {
                const image = document.createElement("img");
                image.src = URL.createObjectURL(blob);
                document.body.appendChild(image);  
            }
            const url = "https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png";
            const blob = await fetchImage(url);
            showImage(blob);
            // sendImage(blob);
        })();
    </script>
</body>

Если же вам нужно подобрать несколько файлов, можно использовать следующую конструкцию:

class MultiplePicker {
    constructor() {
        this._input = document.createElement("input");
        this._input.setAttribute("type", "file");
        this._input.setAttribute("multiple", '');
        this._input.style.visibility = "hidden";
        document.body.appendChild(this._input);
    }
    pick() {
        this._input.click();
    }
    get files() {
        return this._input.files;
    }
}

...

const picker = new MultiplePicker();
picker.pick();
picker.files // FileList {0: File, 1: File, 2: File, length: 3}
4
  • Решение вроде выглядит неплохо, но появилась проблема. При создании экземпляра File выдаёт ошибку TypeError: Argument 1 of File.constructor can't be converted to a sequence. 9 дек 2019 в 18:14
  • @НикельВиктор поправил код, вроде бы, в конструктор следует подавать массив из blob, пробуйте... 9 дек 2019 в 18:39
  • да, это я уже поправил, не успел написать (за подобные конструкции я прям всем сердцем ненавижу js). Но наткнулся на новую проблема. Дело в том, что мне очень не хочеться править бекенд (в данном случаи это админка django) и мне нужно отдать форму в которой есть input[file], в котором должен быть файл. Но я не могу добавить полученный файл в FileList 9 дек 2019 в 18:41
  • @НикельВиктор Проще всего будет создать невидимый элемент input. Пометьте вопрос как правильный, если не трудно. Обновленный код см в ответе 9 дек 2019 в 19:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.