چگونه یک آپلودر پیشرفته Ajax با PHP و Jquery بسازیم ؟

آپلودر پیشرفته Ajax در PHP و Jquery – حتما در خیلی از وبسایت ها شاهد این بوده اید که بدون بارگذاری مجدد صفحه اطلاعات بارگذاری می شوند . مکانیزم Ajax دقیقا کارش همین است بدون نیاز به بارگذاری مجدد Http Request ارسال می کند به هر آدرسی که برای آیپی شما آزاد باشد . یکی از استفاده های جالب و کاربردی از ایجکس ساخت یک آپلودر است که بدون نیاز به بارگذاری صفحه فایل ها را ارسال کند . در این آموزش یاد خواهیم گرفته که چگونه یک آپلودر حرفه ای Ajax بسازیم

کدنویسی سمت سرور آپلود فایل

برای این که بتوانیم فایل های ارسال شده را دریافت کرده و در پوشه ای ذخیره کنیم نیاز به یک زبان سمت سرور داریم که از PHP استفاده می کنیم .

کد زیر را در یک فایل با نام upload.php ذخیره کنید .

<?php

if(!empty($_FILES['file'])){
	
	$file = $_FILES['file'];
	
	if($file['error'])
		die('{"message" : "Unknown Error" , "status" : "0"}');
	
	$type = $file['type'];
	
	$valid_ext = ['video/x-matroska' , 'video/mp4'];
	
	if(!in_array($type , $valid_ext))
		die('{"message" : "You can only Upload {mp4} and {mkv} files !" , "status" : "0"}');
	
	$name = $file['name'];
	
	$name = explode('.' , $name);
	
	$ext = end($name);
	
	if(2<count($name)){
		$name = array_slice($name , 0 , count($name) - 1);
		$name = implode('.' , $name);
	}else
		$name = $name[0];
	
	$timestamp = time();
	
	$name = "{$name}-{$timestamp}.{$ext}";
	$tmp_name = $file['tmp_name'];
	
	$finall_path = "files/{$name}";
	
	move_uploaded_file($tmp_name , $finall_path);
	echo "{\"message\" : \"Your file Uploaded Successfully to {$finall_path}\" ,\"path\":\"{$finall_path}\" : , \"status\" : \"1\"}";
		
}

?>

در خط 12 می توانید فرمت هایی فایلی را که امکان ذخیره شدن روی سرور را دارند مشخص کنید باید به صورت mime type باشد . ما در این جا می خواهیم فقط امکان آپلود فایل های ویدیویی مثل mp4 و mkv وجود داشته باشد .

دقت داشته باشید که در کنار فایل upload.php یک فولدری به نام files هم ایجاد کنید .

بخش front-end آپلودر پیشرفته Ajax

حال نیاز است که ابتدا کتابخانه jquery را در head صفحه اضافه کنیم .

<script src="lib/jquery.min.js"></script>

دقیقا بعد از کد بالا استایل internal را اضافه می کنیم .

<style>
body {
	text-align: center;
	overflow-x: hidden;
}
#file {
	display: none;
}
#upload {
	background-color: orange;
	color: black;
	padding: 5px 20px;
	font-size: 16px;
	font-weight: bold;
	outline: none;
	border: none;
}
.progress-container {
	width: 300px;
	margin-left: calc((100% - 300px) / 2);
}
.progress-container #fill-progress {
	background-color: #673AB7;
	color: yellow;
	display: block;
	height: 7px;
	width: 0;
}
.progress-container #number-progress {
	display: block;
	width: 100%;
	margin-top: 15px;
	text-align: center;
}
</style>

حال نوبت می رسد به فرم صفحه که شامل progress bar و درصد آپلود فایل و همچنین ورودی فایل است .

<form>
    <div class="progress-container">
        <span id="fill-progress"></span>
        <span id="number-progress">0 %</span>
    </div>
    <input type="file" id="file" name="file">
    <input type="button" id="upload" value="آپلود">
</form>

و در پایان کد های javascript که از کتابخانه jquery قدرت گرفته

$('#upload').click(openDialog);
		$('#file').change(upload);
		
		function openDialog(){
			$('#file').click();
		}
		
		
		function upload(e){
			//console.log(e);
		const form = $('form')[0];
		const dataForm = new FormData(form);
		
		
		
		$.post({
			url : "upload.php",
			data : dataForm ,
			processData : false,
			contentType : false,
			success : function(res){
			
				console.log(res);
			
			},
			error : function(err){
			
				console.log('error : ' + err);
			
			},
			xhr : function(e){
				var xhr = new XMLHttpRequest();
				
				
				xhr.upload.addEventListener('progress' , function(e){
					var loaded = e.loaded;
					var total = e.total;
					var progress = (loaded / total * 100).toFixed(0);
					// number-progress , fill-progress
					$('#number-progress').text(progress + "%");
					$('#fill-progress').css("width" , progress + "%");
					
				
				});
				
				
				return xhr;
			
			}
		
		});
		
		}

دموی پروژه :

دانلود پروژه ایجکس