Yii2 Обновить фотографию профиля
У меня есть страница редактирования профиля, где пользователь может изменить свою фотографию / аватарку.
Отображаемый аватар — это фотография текущего пользователя (конечно), и когда я нажимаю кнопку «Обновить аватар», пользователь может выбрать изображение, а затем выбранное изображение будет предварительно отображено, заменяя аватар текущего пользователя.
Вот код, на мой взгляд:
<div class="fileUpload btn btn-warning">
<span>Update Avatar</span>
<input type="file" accept="image/*" onchange="loadFile(event)" class="upload"/>
</div>
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
Проблема в том, что всякий раз, когда я нажимаю кнопку Обновить в конце формы, аватар не меняется. Я знаю, что это потому, что все это в передней части. Как получить вновь выбранное изображение и сохранить его в базе данных? Или кроме этой реализации есть другая реализация?
Кстати, я выбрал этот метод, потому что я хочу просмотреть изображение до и после выбора. Я попробовал Kartik’s FileInput виджет, но я не знаю, где поставить onchange="loadFile(event)" событие в плагине.
Если вам нужно больше кода, например, моего контроллера действий или модели, просто дайте мне знать.
Мне действительно нужна помощь в этом.
Решение
Я не знаю, нашли ли вы решение или нет.
Вы можете сохранить изображение в каталоге и имя файла в таблице БД, как только пользователь выберет изображение.
Используйте этот виджет Виджет загрузки файлов 2amigon начать загрузку изображения, как только пользователь выберет изображение. Этот виджет отображает Загрузка файла jQuery.
использование:
Посмотреть
use dosamigos\fileupload\FileUploadUI;
<?= FileUploadUI::widget([
'model' => $model,
'attribute' => 'profile_pic',
'url' => ['user-profile/upload-profile-picture', 'id' => $model->id],
'gallery' => false,
'fieldOptions' => [
'accept' => 'image/*',
],
'clientOptions' => [
'maxFileSize' => 2000000,
'autoUpload' => true,
],
'clientEvents' => [
'fileuploaddone' => 'function(e, data) {
jQuery(".fb-image-profile").attr("src",data.result);
}',
'fileuploadfail' => 'function(e, data) {
alert("Image Upload Failed, please try again.");
}',
],
]);
?>
контроллер : Это вызовет метод UserProfileController / actionUploadProfilePicture.
public function actionUploadProfilePicture($id)
{
$model = $this->findModel($id);
$oldFile = $model->getProfilePictureFile();
$oldProfilePic = $model->profile_pic;
if ($model->load(Yii::$app->request->post())) {
// process uploaded image file instance
$image = $model->uploadProfilePicture();
if($image === false && !empty($oldProfilePic)) {
$model->profile_pic = $oldProfilePic;
}
if ($model->save()) {
// upload only if valid uploaded file instance found
if ($image !== false) { // delete old and overwrite
if(!empty($oldFile) && file_exists($oldFile)) {
unlink($oldFile);
}
$path = $model->getProfilePictureFile();
$image->saveAs($path);
}
\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return $model->getProfilePictureUrl();
}
}
}
модель
public function getProfilePictureFile()
{
return isset($this->profile_pic) ? Yii::$app->params['uploadPath'] . 'user/profile/' . $this->profile_pic : null;
}
public function getProfilePictureUrl()
{
// return a default image placeholder if your source profile_pic is not found
$profile_pic = isset($this->profile_pic) ? $this->profile_pic : 'default_user.jpg';
return Yii::$app->params['uploadUrl'] . 'user/profile/' . $profile_pic;
}
/**
* Process upload of profile picture
*
* @return mixed the uploaded profile picture instance
*/
public function uploadProfilePicture() {
// get the uploaded file instance. for multiple file uploads
// the following data will return an array (you may need to use
// getInstances method)
$image = UploadedFile::getInstance($this, 'profile_pic');
// if no image was uploaded abort the upload
if (empty($image)) {
return false;
}
// store the source file name
//$this->filename = $image->name;
$ext = end((explode(".", $image->name)));
// generate a unique file name
$this->profile_pic = Yii::$app->security->generateRandomString().".{$ext}";
// the uploaded profile picture instance
return $image;
}
Помимо этого, вы можете использовать Расширенная загрузка с использованием виджета Yii2 FileInput учебник для более подробной информации при загрузке изображений.
Я надеюсь, что это поможет и очистит ваши проблемы с загрузкой файлов.
Другие решения
Других решений пока нет …