FileReader

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
Татьна
Сообщения: 96
Зарегистрирован: 2018.04.22, 00:17

FileReader

Сообщение Татьна »

Мне необходимо при выборе картинки:
- до ее загрузки просмотреть ее;
- получить имя выбранного файла в контроллере.
С помощью FileReader я вывожу картинку на экран. Но как получить имя файла ?
Опять через скрипт или иным способом. Ведь где-то адрес картинки хранится. Пожалуйста, подскажите в каком направлении двигаться.
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: FileReader

Сообщение Dominus »

Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
Татьна
Сообщения: 96
Зарегистрирован: 2018.04.22, 00:17

Re: FileReader

Сообщение Татьна »

Я уже написала просмотр до загрузки (нашла в интернете) в js. Мне надо как только я выберу файл и выведу его изображение где-то сохранить имя файла, чтобы потом в контроллере сохранить его в базе . Но не получается. Не могу сообразить как получить имя файла.
Из src, может надо добавить "name=images[]" в "input" ?

Фрагмент кода view:

Код: Выделить всё

<input type="file" onchange="previewFile()"><br>
	<?php echo Html::img(src, $options = ['style' => ['width' => '100px']] ) ?>
...................................................................................................
	<?php echo Html::submitButton('Сохранить', ['class' => 'btn btn-primary', 'name' => 'update-button', 'value' => 'update']);  ?>
Фрагмент Js:

Код: Выделить всё

function previewFile() {
	var preview = document.querySelector('img');
	var file    = document.querySelector('input[type=file]').files[0];
	var reader  = new FileReader();

	reader.addEventListener("load", function () {
		preview.src = reader.result;
	}, false);

	if (file) {
		reader.readAsDataURL(file);
	} 		  
	else {
		preview.src = "";
	}
}
Фрагмент контроллера:

Код: Выделить всё

public function actionUpdate()
    {		
	$model = new ClientModel();
...................................................................................................
        if ($model->load(Yii::$app->request->post())) 
        {			
			$data = Yii::$app->request->post('ClientModel', []);
			// сохранить полученные данные, в том числе имя файла
...................................................................................................
			return $this->redirect(['index']);
	}		
	return $this->render('update', [
			'model' => $model,
	]);
    }  


Подскажите,пожалуйста, в каком направлении мне двигаться.
Татьна
Сообщения: 96
Зарегистрирован: 2018.04.22, 00:17

Re: FileReader

Сообщение Татьна »

Я немного подкорректировала свой вопрос, может кто-то посмотрит и подскажет.
mkramer
Сообщения: 531
Зарегистрирован: 2014.12.14, 13:02

Re: FileReader

Сообщение mkramer »

Вам уже подсказали. Оригинальное имя файла доступно на сервере через экземпляр UploadedFile: https://www.yiiframework.com/doc/api/2. ... loadedfile

А вот эту часть обучения PHP вы что-ли пропустили? http://php.net/manual/ru/features.file- ... method.php
Татьна
Сообщения: 96
Зарегистрирован: 2018.04.22, 00:17

Re: FileReader

Сообщение Татьна »

Я знаю как делать загрузку и уже делала ее. Я хочу делать загрузку только после того как подберу нужное изображение. Т.е. хочу делать загрузку всего один раз. А не каждый раз как только выведу изображение на экран.
mkramer
Сообщения: 531
Зарегистрирован: 2014.12.14, 13:02

Re: FileReader

Сообщение mkramer »

Так FileReader для того и сделан, он не отправляет ничего на сервер, если вы не отправили это вручную. Приведённый вам JS не отправляет картинку на сервер, она в песочнице браузера и в памяти в виде data url. Ничто не мешает загрузить другую и только потом нажать submit. Вы хотите получить имя файла на клиенте до отправки на сервер? https://toster.ru/q/148667

Полный путь к картинке на компе пользователя вы не получите, из соображений безопасности, а вот имя файла - запросто
mkramer
Сообщения: 531
Зарегистрирован: 2014.12.14, 13:02

Re: FileReader

Сообщение mkramer »

О, заметил только что, что у вас нету имени у input type=file. Ну так сделайте имя и работайте с файлом как обычно. Этот предпросмотр, который вы сделали, никак не помешает браузеру отправить нормально картинку, которую пользователь решит отправить
Татьна
Сообщения: 96
Зарегистрирован: 2018.04.22, 00:17

Re: FileReader

Сообщение Татьна »

Я знаю, что filereader ничего не отправляет на сервер. Он выводит на экран выбранный файл. У меня есть name в input type=file. Просто не привела здесь. Забыла. Кстати, я уже спрашивала о name. Получается в js надо добавить получение имени файла через getelementid и отправить в контроллер. Я правильно поняла ? Я и этот вариант пробовала, не получилось. Попробую повнимательнее посмотреть.
mkramer
Сообщения: 531
Зарегистрирован: 2014.12.14, 13:02

Re: FileReader

Сообщение mkramer »

Просто вашему input[type=file] назначьте имя, без всякого JS.

Код: Выделить всё

<?= Html::activeFileInput($model, "image", ["onchange" => "previewFile()"]); ?>
Ну проследите, естественно, чтоб у формы был enctype='multipart/form-data'. А дальше на сервере всё, как в руководстве Yii по загрузке файлов. Имя файла сам браузер тогда передаст. previewFile не помешает по субмиту отправить этот файл, он не стирается от того, что вы его прочитали и записали в виде dataurl в src картинки.
Татьна
Сообщения: 96
Зарегистрирован: 2018.04.22, 00:17

Re: FileReader

Сообщение Татьна »

Огромнейшее спасибо. Не знала, что можно в одном операторе объединить и загрузку, и предварительный просмотр.
Отличные у Вас ребята. До последнего объясняете. Еще раз спасибо.
Ответить