کد آپلود عکس با ajax جی کوئری و پی اچ پی

کدهای دیگر این نویسنده

نمایش در php

نمایش در php


افکت fade در جی کوئری

افکت fade در جی کوئری


نمونه کد اسلاید شو با جی کوئری

نمونه کد اسلاید شو با جی کوئری


ارسال ایمیل با php

ارسال ایمیل با php


استفاده از صوت در html

استفاده از صوت در html


ارسال ایمیل با phpmailer

ارسال ایمیل با phpmailer


کد قرار دادن ادامه مطلب با php

کد قرار دادن ادامه مطلب با php


کد ساخت چند فایل route جداگانه برای پروژه لاراول

کد ساخت چند فایل route جداگانه برای پروژه لاراول


انواع validation عکس در لاراول

انواع validation عکس در لاراول


کد آدرس صفحه جاری در وردپرس

کد آدرس صفحه جاری در وردپرس


کد نمایش اطلاعات دیتابیس با php و mysqli

کد نمایش اطلاعات دیتابیس با php و mysqli


کد غیرفعال کردن created_at و updated_at timestamps در مدل

کد غیرفعال کردن created_at و updated_at timestamps در مدل


کد نمایش نام کلاس یا متد جاری در codeigniter

کد نمایش نام کلاس یا متد جاری در codeigniter


کد بارگذاری خودکار صفحه با jquery

کد بارگذاری خودکار صفحه با jquery


کد استفاده از کتابخانه sweetalert در لاراول

کد استفاده از کتابخانه sweetalert در لاراول


کد آپلود عکس با ajax جی کوئری و پی اچ پی
<html>
	<head>
		<title>آپلود عکس با ajax جی کوئری و پی اچ پی</title>
		<link href="styles.css" rel="stylesheet" type="text/css" />
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	</head>
<body>
	<div class="bgColor">
		<form id="uploadForm" action="upload.php" method="post">
			<div id="targetLayer">No Image</div>
			<div id="uploadFormLayer">
				<input name="userImage" type="file" class="inputFile" /><br/>
				<input type="submit" value="Submit" class="btnSubmit" />
			</div>
		</form>
	</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function (e) {
	$("#uploadForm").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)
		    {
			$("#targetLayer").html(data);
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});
</script>
<?php
	if(is_array($_FILES)) {
	   if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
	      $sourcePath = $_FILES['userImage']['tmp_name'];
	      $targetPath = "images/".$_FILES['userImage']['name'];
	      if(move_uploaded_file($sourcePath,$targetPath)) {
	?>
	<img class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" />
	<?php
	      }
	   }
	}
?>
body {
	font-family: Arial;
	font-size: 14px;
}
.bgColor {
	max-width: 440px;
	height:150px;
	background-color: #fff4be;
	border-radius: 4px;
}
.bgColor label{
	font-weight: bold;
	color: #A0A0A0;
}
#targetLayer{
	float:left;
	width:150px;
	height:150px;
	text-align:center;
	line-height:150px;
	font-weight: bold;
	color: #C0C0C0;
	background-color: #F0E8E0;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}
#uploadFormLayer{
	float:left;
	padding: 20px;
}
.btnSubmit {
	background-color: #696969;
    padding: 5px 30px;
    border: #696969 1px solid;
    border-radius: 4px;
    color: #FFFFFF;
    margin-top: 10px;
}
.inputFile {
	padding: 5px;
	background-color: #FFFFFF;
	border:#F0E8E0 1px solid;
	border-radius: 4px;
}
.image-preview {	
	width:150px;
	height:150px;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}

 

امیدوارم که از این کد نهایت استفاده رو ببرید
لطفا وارد شوید یا ثبت نام کنید تا بتوانید ثبت نظر کنید