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

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آموزش آپلود تصاویر در 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>

۱۰

۱۱

۱۲

۱۳

۱۴

<div id="container">تصویری قرار ندارد</div>

<p class="txt-subtitle">آپلود تصاویر</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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

script src="js/code_js.js" type="text/javascript"></script>

$(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>

مطلب پیشنهادی: تگ های HTML – تگ s

و در آخر کدهای 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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

.container-bg {

width: ۶۱۰px;

background-color: #F9D735;

border-radius:۴px;

}

#container {

padding: ۱۰px;

text-align:center;

font-weight: bold;

color: red;

background-color: azure;

overflow:auto;

border:blue ۱px solid;

border-top-left-radius:۴px;

border-top-right-radius:۴px;

}

#container img {

padding: ۱۰px;

}

#formUploadingLayer {

padding: ۱۰px;

border-bottom-left-radius:۴px;

border-bottom-right-radius:۴px;

border:blue ۱px solid;

background:azure;

color:red;

font-size:۱۸px;

}

.btnUpload {

background-color: azure;

padding:۵px ۲۰px;

border: blue ۱px solid;

color: red;

border-radius:۴px;

}

.inputFile {

padding: ۴px;

background-color: azure;

border:blue ۱px solid;

border-radius:۴px;

}

.txt-subtitle {

font-size:۱.۲em;

}

</style>

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

موفق باشید .