Как и из чего состоит скрипт загрузки аватара?

Ребят, здравствуйте. Появилась такая потребность, чтобы у пользователей была возможность загружать аватар на сайт. Без галереи - один пользователь - одно изображение.
Скажите пожалуйста, в каком направлении копать решения?
Как я понял что нужен для начала скрипт загрузки файла на сервер, с проверкой на изображение. А дальше?
Не могли бы вы либо направить меня куда-то, либо рассказать последовательность.
Как я понял: 1) В таблице mysql с пользователями создается столбец с путем к файлу.
2) Создается папка куда будут загружаться файлы
3) Скрипт с загрузкой изображений.
А дальше? Как эти пункты связать воедино? Заранее благодарен за развернутый ответ.
  • Вопрос задан
  • 3042 просмотра
Решения вопроса 1
@Kostik_1993
Fullstack Web Developer | PHP | Laravel | Vue.js
<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['datafile']['name']); 
 
$ext = substr($_FILES['datafile']['name'],strpos($_FILES['datafile']['name'],'.'),strlen($_FILES['datafile']['name'])-1); 
$filetypes = array('.jpg','.gif','.bmp','.png','.JPG','.BMP','.GIF','.PNG','.jpeg','.JPEG');
 
if(!in_array($ext,$filetypes)){
	echo "<p>Данный формат файлов не поддерживается</p>";}
else{ 
	if (move_uploaded_file($_FILES['datafile']['tmp_name'], $file)) { 
		
		$PDO->prepare("UPDATE user SET image= :img WHERE iduser= :id");
		$result->execute(array('id' => $id, 'img' = $file));
		
	  echo $file;
	} else {
		echo "error";
	}
}
?>

#upload{
	margin:10px 30px; padding:10px;
	font-weight:bold; font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#f2f2f2;
	color:#3366cc;
	border:1px solid #ccc;
	width:140px;
	cursor:pointer !important;
	-moz-border-radius:5px; -webkit-border-radius:5px;
}
.darkbg{
	background:#ddd !important;
}
#status{
	font-family:Arial; padding:5px;
}
ul#files{ list-style:none; padding:0; margin:0; }
ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px;}
ul#files li img{ max-width:160px; max-height:150px; }
.success{}
.error{ background:#f0c6c3; border:1px solid #cc6622; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX File Upload - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
<script language="Javascript">
function fileUpload(form,action_url,div_id){
	var iframe=document.createElement("iframe");
	iframe.setAttribute("id","upload_iframe");
	iframe.setAttribute("name","upload_iframe");
	iframe.setAttribute("style","width: 0; height: 0; border: none;");
	form.parentNode.appendChild(iframe);
	window.frames['upload_iframe'].name="upload_iframe";
	iframeId=document.getElementById("upload_iframe");
	var eventHandler=function(){
		if(iframeId.detachEvent)iframeId.detachEvent("onload",eventHandler);
		else iframeId.removeEventListener("load",eventHandler,false);
		if(iframeId.contentDocument){
			content=iframeId.contentDocument.body.innerHTML;
		}else if(iframeId.contentWindow){
			content=iframeId.contentWindow.document.body.innerHTML;
		}else if(iframeId.document){
			content=iframeId.document.body.innerHTML;
		}
		//document.getElementById(div_id).innerHTML=content;
		document.getElementById(div_id).setAttribute("style","background: url("+content+")center center no-repeat; background-size: cover;  height: 400px; width: 400px;");
		setTimeout('iframeId.parentNode.removeChild(iframeId)',250);
	}
	if(iframeId.addEventListener)iframeId.addEventListener("load",eventHandler,true);
	if(iframeId.attachEvent)iframeId.attachEvent("onload",eventHandler);
	form.setAttribute("target","upload_iframe");
	form.setAttribute("action",action_url);
	form.setAttribute("method","post");
	form.setAttribute("enctype","multipart/form-data");
	form.setAttribute("encoding","multipart/form-data");
	form.submit();
	document.getElementById(div_id).append="Uploading...";
	
}
</script>
<form>
	<input type="text" hidden value="1" name="user_id">
	<input type="file" name="datafile" onchange="fileUpload(this.form,'upload-file.php','upload'); return false;"><br>
	<div id="upload"></div>
</form>
</body>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Deodatuss
@Deodatuss
Я делал так. У каждого пользователя при регистрации одинаковый аватар (ссылка на один и тот же файл в бд). Потом, когда он его меняет на свой, создается изображение с которому присваивается название такое же как ID пользователя в базе. Таким образом, каждый раз когда пользователь загружает новый аватар, ему задается уникальное имя + старый аватар перезаписывается новым.
Ответ написан
swipeshot
@swipeshot
Учусь на ошибках.
Тоже недавно была такая надобность. Но я еще ее не реализовал.
В общем, вы сказали все правильно.
Ну я распишу все, как сделал бы я.
1. Пользователь загружает изображение.
2. Файл добавляется в директорию.
3. Выбирается название изображения. Можно через rand(), но можно и черезmd5_file()
4. Потом в базу данных в отдельный столбец записывается адрес на изображение.

Готовый скрипт загрузки изображения выбрал бы этот.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы