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

Ребят, здравствуйте. Появилась такая потребность, чтобы у пользователей была возможность загружать аватар на сайт. Без галереи - один пользователь - одно изображение.
Скажите пожалуйста, в каком направлении копать решения?
Как я понял что нужен для начала скрипт загрузки файла на сервер, с проверкой на изображение. А дальше?
Не могли бы вы либо направить меня куда-то, либо рассказать последовательность.
Как я понял: 1) В таблице mysql с пользователями создается столбец с путем к файлу.
2) Создается папка куда будут загружаться файлы
3) Скрипт с загрузкой изображений.
А дальше? Как эти пункты связать воедино? Заранее благодарен за развернутый ответ.
  • Вопрос задан
  • 3808 просмотров
Решения вопроса 1
@Kostik_1993
Web Developer
<?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>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
swipeshot
@swipeshot
Учусь на ошибках.
Тоже недавно была такая надобность. Но я еще ее не реализовал.
В общем, вы сказали все правильно.
Ну я распишу все, как сделал бы я.
1. Пользователь загружает изображение.
2. Файл добавляется в директорию.
3. Выбирается название изображения. Можно через rand(), но можно и черезmd5_file()
4. Потом в базу данных в отдельный столбец записывается адрес на изображение.

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

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

Войти через центр авторизации
Похожие вопросы
10 мая 2024, в 18:22
8000 руб./за проект
10 мая 2024, в 18:16
30000 руб./за проект
10 мая 2024, в 18:07
20000 руб./за проект