Загрузить файл в input[file] по ссылке на кариинку

118
19 декабря 2021, 00:40

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

Answer 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}
Answer 2

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

//Функция для получения объекта 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;

`

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

READ ALSO
JS не видит элементы, созданные им ранее
javascript

JS не видит элементы, созданные им ранее

Делаю корзину онлайн магазинаВ правом верхнем углу у меня корзина, куда заносятся купленные товары

 162
Использование тайлов Google Maps в leaflet js
javascript

Использование тайлов Google Maps в leaflet js

Мне нужно отображать геопозицию агента на карте в своей CRM системеМогу ли я использовать Google Maps тайлы в leaflet JS в коммерческом продукте? Я подключаю...

 185
форма регистрации пользователя
javascript

форма регистрации пользователя

почему не читается свойство password при загрузке в правиле confirmPasswordRules?

 105
как передать контекст html?
HTML

как передать контекст html?

мне надо передать контекст НА html В html: допустим надо передать: "< b>Hello world!< /b>" и на страничке это отображается ТОЧНО ТАК ЖЕ, те

 194