делать это безопасно, к сожалению, не все, что simple. Самый простой способ встроить изображение после загрузки - это использовать его в качестве встроенного base64 (он использует больше оперативной памяти и пропускной способности, чем обслуживает его по URL-адресу, но вы хотели его simple, а метод base64 позволяет избежать таких проблем, как HTML-кодирование окончательного варианта savename, убедившись, что веб-сервер имеет разрешения для папки загрузки и проблемы с папкой сохранения, недоступной из корневой веб-папки). Как правило, вы не должны позволять хакерам определять фактическое имя файла сохранения на вашем сервере (что произойдет, если хакеры сделают имя файла ../../../../../etc/passwd\x00.jpg? или /srv/http/default/evil_script.php\x00.jpg? или <script>evil_javascript();</script>.jpg?), но так как вы этого хотите simple, вы можете избежать проверки, что имя не содержит опасных символов (регулярное выражение здесь пригодится), альтернатива состоит в том, чтобы сохранить имя пользователя (/ поставлено хакером?) В базе данных, и файл на диске под другим именем (возможно, укажите имя файла на диске в качестве уникального ключа базы метаданных для этого файла? Это то, что я обычно делаю, но это не simple). что касается I need it stay on the html page and change the div - это возможно без обновления через javascript, но не обязательно, и меньше simple, вы можете обойтись простой старой динамической страницей php вместо пути javascript / XMLHttpRequest, попробуйте:
<?php
declare(strict_types = 1);
$uploadOk = 0;
if (! empty ( $_FILES ['fileToUpload'] )) {
$target_dir = "winups/";
$name = $_FILES ['fileToUpload'] ['name'];
if (! preg_match ( '/^[[:alnum:][:space:]\_\.\-]{4,100}$/ui', $name )) {
http_response_code ( 400 );
die ( "illegal filename detected. for security reasons, the filename must match the regex /^[[:alnum:][:space:]\_\.\-]{4,100}$/ui" );
}
$imageFileType = strtolower ( pathinfo ( $name, PATHINFO_EXTENSION ) );
$extensionWhitelist = array (
'jpg',
'jpeg',
'png',
'gif',
'bmp'
);
if (! in_array ( $imageFileType, $extensionWhitelist, true )) {
http_response_code ( 400 );
die ( "Sorry, only allowed image types are: " . htmlentities ( implode ( ', ', $extensionWhitelist ) ) );
}
if (false === getimagesize ( $_FILES ["fileToUpload"] ["tmp_name"] )) {
http_response_code ( 400 );
die ( "image is corrupted" );
}
// ok, the image passed the security checks.
$target_file = $target_dir . $name;
// now to find an unique filename
// OPTIMIZEME, excessive syscalls will be cpu-expensive and slow, DoS vector, use glob() or some limit lower than PHP_INT_MAX ?
if (file_exists ( $target_file )) {
$success = false;
for($i = 2; $i < PHP_INT_MAX; ++ $i) {
if (! file_exists ( "$i." . $target_file )) {
$success = true;
$target_file = "$i." . $target_file;
break;
}
}
if (! $success) {
http_response_code ( 500 );
die ( "too many duplicates of this filename! (" . PHP_INT_MAX . " duplicates!)" );
}
}
$uploadOk = 1;
if (! move_uploaded_file ( $_FILES ["fileToUpload"] ["tmp_name"], $target_file )) {
http_response_code ( 500 );
die ( "Sorry, an internal server error while saving your file" );
}
}
?>
<!DOCTYPE html>
<html>
<body>
<form action="?" method="post" enctype="multipart/form-data">
Select image to upload: <input type="file" name="fileToUpload"
id="fileToUpload"> <input type="submit" value="Upload Image"
name="submit">
</form>
<?php
if ($uploadOk) {
echo "The file " . htmlentities ( $name ) . " has been uploaded.";
echo '<div id="mainimage" style="background-color: #cccccc; width: 300px; height: 300px;"><img src="data:image/' . $imageFileType . ';base64,' . base64_encode ( file_get_contents ( $target_file ) ) . '" /></div>';
}
?>
</body>
</html>