FileReader
FileReader
Мне необходимо при выборе картинки:
- до ее загрузки просмотреть ее;
- получить имя выбранного файла в контроллере.
С помощью FileReader я вывожу картинку на экран. Но как получить имя файла ?
Опять через скрипт или иным способом. Ведь где-то адрес картинки хранится. Пожалуйста, подскажите в каком направлении двигаться.
- до ее загрузки просмотреть ее;
- получить имя выбранного файла в контроллере.
С помощью FileReader я вывожу картинку на экран. Но как получить имя файла ?
Опять через скрипт или иным способом. Ведь где-то адрес картинки хранится. Пожалуйста, подскажите в каком направлении двигаться.
- Dominus
- Сообщения: 892
- Зарегистрирован: 2013.03.14, 21:27
- Откуда: Россия, Иваново
- Контактная информация:
Re: FileReader
Тут посмотрите:
https://www.html5rocks.com/ru/tutorials/file/dndfiles/
https://github.com/yiisoft/yii2/blob/ma ... -upload.md
https://www.html5rocks.com/ru/tutorials/file/dndfiles/
https://github.com/yiisoft/yii2/blob/ma ... -upload.md
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
Re: FileReader
Я уже написала просмотр до загрузки (нашла в интернете) в js. Мне надо как только я выберу файл и выведу его изображение где-то сохранить имя файла, чтобы потом в контроллере сохранить его в базе . Но не получается. Не могу сообразить как получить имя файла.
Из src, может надо добавить "name=images[]" в "input" ?
Фрагмент кода view:
Фрагмент 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']); ?>
Код: Выделить всё
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,
]);
}
Подскажите,пожалуйста, в каком направлении мне двигаться.
Re: FileReader
Я немного подкорректировала свой вопрос, может кто-то посмотрит и подскажет.
Re: FileReader
Вам уже подсказали. Оригинальное имя файла доступно на сервере через экземпляр UploadedFile: https://www.yiiframework.com/doc/api/2. ... loadedfile
А вот эту часть обучения PHP вы что-ли пропустили? http://php.net/manual/ru/features.file- ... method.php
А вот эту часть обучения PHP вы что-ли пропустили? http://php.net/manual/ru/features.file- ... method.php
Re: FileReader
Я знаю как делать загрузку и уже делала ее. Я хочу делать загрузку только после того как подберу нужное изображение. Т.е. хочу делать загрузку всего один раз. А не каждый раз как только выведу изображение на экран.
Re: FileReader
Так FileReader для того и сделан, он не отправляет ничего на сервер, если вы не отправили это вручную. Приведённый вам JS не отправляет картинку на сервер, она в песочнице браузера и в памяти в виде data url. Ничто не мешает загрузить другую и только потом нажать submit. Вы хотите получить имя файла на клиенте до отправки на сервер? https://toster.ru/q/148667
Полный путь к картинке на компе пользователя вы не получите, из соображений безопасности, а вот имя файла - запросто
Полный путь к картинке на компе пользователя вы не получите, из соображений безопасности, а вот имя файла - запросто
Re: FileReader
О, заметил только что, что у вас нету имени у input type=file. Ну так сделайте имя и работайте с файлом как обычно. Этот предпросмотр, который вы сделали, никак не помешает браузеру отправить нормально картинку, которую пользователь решит отправить
Re: FileReader
Я знаю, что filereader ничего не отправляет на сервер. Он выводит на экран выбранный файл. У меня есть name в input type=file. Просто не привела здесь. Забыла. Кстати, я уже спрашивала о name. Получается в js надо добавить получение имени файла через getelementid и отправить в контроллер. Я правильно поняла ? Я и этот вариант пробовала, не получилось. Попробую повнимательнее посмотреть.
Re: FileReader
Просто вашему input[type=file] назначьте имя, без всякого JS.
Ну проследите, естественно, чтоб у формы был enctype='multipart/form-data'. А дальше на сервере всё, как в руководстве Yii по загрузке файлов. Имя файла сам браузер тогда передаст. previewFile не помешает по субмиту отправить этот файл, он не стирается от того, что вы его прочитали и записали в виде dataurl в src картинки.
Код: Выделить всё
<?= Html::activeFileInput($model, "image", ["onchange" => "previewFile()"]); ?>
Re: FileReader
Огромнейшее спасибо. Не знала, что можно в одном операторе объединить и загрузку, и предварительный просмотр.
Отличные у Вас ребята. До последнего объясняете. Еще раз спасибо.
Отличные у Вас ребята. До последнего объясняете. Еще раз спасибо.