Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Blob. Как загрузить файл, переименовать и тут же скачать (https://javascript.ru/forum/dom-window/78916-blob-kak-zagruzit-fajjl-pereimenovat-i-tut-zhe-skachat.html)

sovsem-nub 22.11.2019 09:18

Blob. Как загрузить файл, переименовать и тут же скачать
 
С Blob все просто, но у меня как всегда ничего не работает. Читал тут
https://learn.javascript.ru/blob и https://learn.javascript.ru/file

нужно сделать поле input <input id="file" type="file" > в которую мы выбираем файл (файлы) с любым расширением, скрипт добавляет к имени еще слово "test_" и отправляет на скачивание

Вот даже рабочий пример https://jsfiddle.net/zip13/yfjn6g2x/6/ с огромной библиотекой. По сути то, что мне нужно сделать (только без библиотеки). И вот мои потуги, которые не работают

<input type="file" onchange="readFile(this)">
<script>
function readFile(input){

let link = document.createElement('a');
link.download = 'hello.txt';
  let file = input.files[0];

let blob = new Blob(file, {type: 'text/plain'});

link.href = URL.createObjectURL(blob);

link.click();
}
 </script>


И еще вопрос. Можно как-то скачать blob без создания ссылки и без CORS? каким-то более очевидным способом?

Malleys 22.11.2019 14:11

Цитата:

Сообщение от sovsem-nub
Вот даже рабочий пример https://jsfiddle.net/zip13/yfjn6g2x/6/ с огромной библиотекой. По сути то, что мне нужно сделать (только без библиотеки).

Там нет никакой библиотеки, но только одна функция download, которая написана с учётом работы и в старых браузерах тоже, вы можете использовать!

sovsem-nub, если вам не нужна работа в старых браузерах, то тот код можно сократить до...
<input type="file" onchange="download(this.files[0], 'test_'+this.files[0].name)">

<script>

function download(file, fileName) {
	const link = document.createElement("a");
	const objectURL = URL.createObjectURL(file);
	link.download = fileName;
	link.href = objectURL;
	document.body.append(link);
	requestAnimationFrame(() => {
		link.click();
		link.remove();
		URL.revokeObjectURL(objectURL);
	});
}

</script>


Цитата:

Сообщение от Poznakomlus
Скачивать файл или нет решает браузер от его настроек

Зависит от атрибута download у ссылки

Цитата:

Сообщение от Poznakomlus
вы можете прочитать файл если вам нужно

Не нужно, пишут ведь, что «загрузить файл, переименовать и тут же скачать»

рони 22.11.2019 14:50

Цитата:

Сообщение от Malleys
requestAnimationFrame

зачем нужна пауза после append, строка 11?

Vlasenko Fedor 22.11.2019 17:16

Минусующим. Какого ...
Я трачу время на примеры решения
а вы бл... , что творите?
<input type="file" onchange="download(this.files[0])">
<script>
    function buildElement(tagName, props) {
        var element = document.createElement(tagName);
        for (var propName in props) element[propName] = props[propName];
        return element;
    }

    function download(file) {
        var reader = new FileReader;
        reader.onload = function () {
            var link = buildElement('a', {download: 'test_' + file.name, href: reader.result});
            link.click();
            link.remove();
        };
        reader.readAsDataURL(file);
    };
</script>


Часовой пояс GMT +3, время: 16:17.