آموزش آپلود تصاویر در php + سورس

سلام

برای مشاهده آموزش  رایگان پیشرفته آپلود فایل در PHP کلیک کنید

در این پست میخوایم با همدیگه یاد بگیریم چه طوری میتونیم تصاویرمون رو در php آپلود کنیم ، در پایان آموزش سورس را نیز در اختیارتون میزارم تا بتونید دانلود کنید .

طراحی فرم html :

<center>
	<div class="container-bg">
		<form id="formUploading" action="upload.php" method="post">
		<div id="container">تصویری قرار ندارد</div>
			<div id="formUploadingLayer">
				<p class="txt-subtitle">آپلود تصاویر</p>
				<p><input name="uploading_Image[]" type="file" class="inputFile" /><p>
				<p><input name="uploading_Image[]" type="file" class="inputFile" /><p>
				<p><input name="uploading_Image[]" type="file" class="inputFile" /><p>
				<p><input type="submit" value="آپلود" class="btnUpload" /><p>
			</div>
		</form>
	</div>
</center>

کدهای Jquery :

script src="js/code_js.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(document).ready(function (e) {
	$("#formUploading").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "upload.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data){
			$("#container").html(data);
		    },
		  	error: function(){} 	        
	   });
	}));
});
</script>

و در آخر کدهای css برای استایل :

<style type="text/css">
.container-bg {
	width: 610px;
	background-color: #F9D735;
	border-radius:4px;
}
#container {
	padding: 10px;
	text-align:center;
	font-weight: bold;
	color: red;
	background-color: azure;
	overflow:auto;
	border:blue 1px solid;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}
#container img {
	padding: 10px;
}
#formUploadingLayer {
	padding: 10px;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	border:blue 1px solid;
	background:azure;
	color:red;
	font-size:18px;
}
.btnUpload {
	background-color: azure;
	padding:5px 20px;
	border: blue 1px solid;
	color: red;
	border-radius:4px;
}
.inputFile {
	padding: 4px;
	background-color: azure;
	border:blue 1px solid;
	border-radius:4px;
}
.txt-subtitle {
	font-size:1.2em;
}
</style>

کار به اتمام رسید .

موفق باشید .