آپلود تصویر با استفاده از php و Ajax

در این آموزش یک فرم ایجاد خواهیم کرد که با استفاده از تکنولوژی Ajax تصویر مورد نظر ما را بر روی سرور آپلود و سپس تصویر آپلود شده را برای ما نمایش خواهد داد.

Ajax چیست؟

واژه Ajax با تلفظ <ايجكس> يا <ايژاكس> سرنام عبارت Asynchronous JavaScript and XML و به معني <تركيب نامتقارن جاوا اسكريپت و>XML است.

Ajax به صفحات وب این امکان را میدهد که به صورت غیر همزمان و تنها با تبادل اطلاعات اندکی با سرور، بخشی از صفحه را به روز رسانی کنند.

ما از تکنولوژی jQuery Ajax برای آپلود تصویر استفاده می کنیم.

ابتدا یک فرم با یک فیلد ورودی از نوع فایل و یک دکمه ایجاد می کنم. با کلیک کردن بر روی دکمه اسکریپت Ajax اجرا خواهد شد و فایل تصویر را به سرور ارسال میکند و پس از آپلود موفق آن را بصورت یک کد html در قالب یک تصویر نمایش خواهد داد.

فرم Html

کد زیر یک فرم html را نمایش می دهد که حاوی یک فیلد ورودی فایل و یک دکمه می باشد، با کلیک بر روی دکمه، مقدار فرم با استفاده از Ajax به سرور ارسال خواهد شد.

<form id="uploadForm" action="upload.php" method="post">
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />
</form>

اسکریپت Ajax

یک نمونه از کلاس FormData ایجاد کرده ایم که کار دیافت اطلاعات فرم را انجام می دهد. سپس با استفاده از  تابع ajax مقادیر را به سرور ارسال خواهد شد.

سپس در سمت سرور با استفاده از php فایل آپلود و نتیجه در قالب یک کد html برگشت و در تگی بنام targetLayer نمایش داده خواهد شد

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

فایل کامل پیوست شده است

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