ไฟล์ test_uploads.php และโฟลเดอร์ test_uploads/
<!DOCTYPE html>
<html>
<head>
<title>imple </title>
</head>
<style>
body {
background-color: grey;
background-size: 100%;
}
#wrapper {
background-color: white;
width: 800px;
height: 600px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#viewer {
margin-top: 6px;
border-style: solid;
border-color: grey;
border-weight: thin;
height: 450px;
}
#button {
color: white;
background-color: #df1c24;
border: none;
width: 100px;
height: 25px;
}
#header {
background-color: yellow;
padding: 4px;
text-align:center;
color:#
}
body img {
width: 147px;
float: left;
margin: 6px;
}
</style>
<body>
<div id="wrapper">
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//echo "<pre>";
//print_r($_FILES);
//echo "</pre>";
// check for file type
if ($_FILES['myfile']['type'] == 'image/jpeg' || $_FILES['myfile']['type'] == 'audio/mpeg') {
$source = $_FILES['myfile']['tmp_name'];
$destination = "test_uploads/".$_FILES['myfile']['name'];
if(move_uploaded_file($source,$destination)){
echo "File uploaded!<br/>";
} else {
echo "File uploading failed!<br/>";
}
} else {
echo "Unsupported file type!<br/>";
}
}
?>
<div id="header">Click browse to select a file : </div><br/>
<form method="post" enctype="multipart/form-data">
<input type="file" name="myfile" /><br/><br/>
<input type="submit" value="post" id="button" />
</form>
<div id="viewer">
<?php
$array = glob("test_uploads/*.{jpg,jpeg,JPG,JPEG}",GLOB_BRACE);
foreach($array as $file){
echo "<img src='$file' />";
}
$array = glob("test_uploads/*.{mp3,MP3}",GLOB_BRACE);
foreach($array as $file){
echo "<audio controls style='width:98%'>";
echo "<source src='$file' type='audio/mpeg' >";
echo "</audio>";
echo basename($file);
}
//echo "<pre>";
//print_r($array);
//echo "</pre>";
?>
</div>
</div>
</body>
</html>
Credit : PHP - Web Design - Simple file uploading website with PHP, HTML and CSS
Sign up here with your email
ConversionConversion EmoticonEmoticon