Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2019, 09:18
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 189

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? каким-то более очевидным способом?
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2019, 12:28
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,279

Сообщение от sovsem-nub Посмотреть сообщение
Можно как-то скачать blob без создания ссылки и без CORS? каким-то более очевидным способом?
Вы здесь о разных вещах говорите
CORS междоменное взаимодействие
Скачивать файл или нет решает браузер от его настроек
вы можете прочитать файл если вам нужно
<script>
        function readFile() {
            var selectedFile = document.getElementById('inputFile').files[0];
            var reader = new FileReader;
            reader.onload = function () {
                alert(reader.result);
            };
            reader.readAsText(selectedFile);
        }
    </script>
<input id="inputFile" type="file"  onchange="readFile()">
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2019, 14:11
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,303

Сообщение от 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
вы можете прочитать файл если вам нужно
Не нужно, пишут ведь, что «загрузить файл, переименовать и тут же скачать»

Последний раз редактировалось Malleys, 22.11.2019 в 14:20.
Ответить с цитированием
  #4 (permalink)  
Старый 22.11.2019, 14:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,229

Сообщение от Malleys
requestAnimationFrame
зачем нужна пауза после append, строка 11?
Ответить с цитированием
  #5 (permalink)  
Старый 22.11.2019, 17:16
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,279

Минусующим. Какого ...
Я трачу время на примеры решения
а вы бл... , что творите?
<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как записать определенное содержимое в файл Json? Floky Node.JS 2 21.07.2018 18:23
Как передать выбранный файл (input file) ajax sasha3611 jQuery 1 11.02.2018 14:14
Как сохранить произвольный файл в веб-хранилище (localstorage)? ice99 Общие вопросы Javascript 2 05.01.2018 09:26
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
как правильно подключить файл? betonka Events/DOM/Window 10 10.04.2011 21:53