كيف نرفع الصور والملفات دون إعادة تحميل الصفحة

يمكن رفع الصور بإستخدام jQuery من خلال عمل نموذج form يحتوي على الخاصية enctype بقيمة multipart/form-data وعمل عنصر input من نوع file في هذا النموذج وإعطائه القيمة multiple كالتالي:

<h3>Ajax Image Uploader</h3>
<form action="uploader.php" method="post" enctype="multipart/form-data" id="upload_form">
    <input name="files" type="file" multiple />
    <input name="submit" type="submit" value="Start"/>
</form>

كما ستحتاج إلى إضافة شريط التحميل من خلال عمل عنصر div وإعطائه بعض خصائص CSS كالتالي:

<div id="progress-wrapper">
  <div class="progressbar"></div><!-- شريط التحميل نفسه -->
  <div class="status">0%</div><!-- نسبة التحميل -->
</div>

<!-- في حالة حدوث خطأ أو مشكلة سيتم عرضها هنا -->
<div id="output"><!-- error or success results --></div>

#progress-wrapper {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    border-radius: 3px;
    margin: 10px;
    text-align: left;
    background: #fff;
}
#progress-wrapper .progressbar{
    height: 20px;
    border-radius: 3px;
    background-color: #f39ac7;
    width: 0;
}
#progress-wrapper .status{
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}

ملاحظة: ليس عليك إتباع نفس طريقة التنظيم أو تنسيقات CSS فهي مجرد مثال وسأترك هذا الأمر لك لتقوم به.

الأمر الأخير هو إرسال الصورة إلى الخادم من خلال عمل طلبات XMLHttpRequest  بإستخدام ajax في jQuery كالتالي:

$.ajax({
	url : post_url,
	type: "POST",
	data : form_data,
	contentType: false,
	cache: false,
	processData:false,
	xhr: function(){
      
		// upload Progress
		var xhr = $.ajaxSettings.xhr();
		if (xhr.upload) {
			xhr.upload.addEventListener('progress', function(event) {
				var percent = 0;
				var position = event.loaded || event.position;	// حجم ما تم إرساله
				var total = event.total;	// حجم الملف الكلي
              
				// حساب النسبة المئوية لما تم إرساله
				if (event.lengthComputable) {
					percent = Math.ceil(position / total * 100);
				}
              
				// تحديث شريط التحميل
				$(progress_bar_id +" .progressbar").css("width", + percent +"%");	// تغير طول العنصر .progressbar
				$(progress_bar_id + " .status").text(percent +"%");	// كتابة نسبة التحميل 
			}, true);
		}
		return xhr;
	},
	mimeType:"multipart/form-data"
}).done(function(res){ // بعد إتمام التحميل
	$(my_form_id)[0].reset(); // تفريغ النموذج لإرسال ملفات أخرى
	$(result_output).html(res); // كتابة نتسحة الإرسال إلى الخادم
	submit_btn.val("Upload").prop("disabled", false); //enable submit button once ajax is done
});

الآن جزء الخادم في ملف uploader.php:

<?php 
  $img = $_FILES["image"]["name"]	// تخزين اسم الملف الأصلي من العميل
  $tmp = $_FILES["image"]["tmp_name"]	// اسم الملف المؤقت على الخادم
  $errorimg = $_FILES["image"]["error"]	// في حالة وجود أي خطأ أثناء عملية الرفع فسيتم تخزينها في هذا المتغير
?>

بعد ذلك يمكن نقل الملف إلى مجلد معين من خلال دالة move_uploaded_file إن أردت ويمكنك أيضًا التحقق من صيغة الملف extension الذي تم رفعه، والتأكد من حجم الملف .. إلخ

لكن عليك الحذر من أي ملف يتم رفعه من قِبل المستخدم، فقد يحتوي على برمجيات ضارة قد تؤدي إلى إختراق الخادم أو حتى بيانات المستخدمين، لذلك أنصحك بإستخدام مكتبات جاهزة لرفع الملفات والتحقق منها مثل ما يفعل إطار العمل Laravel.

أيضًا قد تحتاج إلى إضافة reCaptcha إلى نموذج الإرسال (أو اي وسيلة مشابهة) لكي تمنع محاولات حجب الخدمة عبر رفع عدد كبير من الملفات، وبالتالي جعل الموقع بطيء أو ملء مساحة التخزين الخاصة بالخادم.

بتاريخ 16 ساعات قال سامح أشرف:

يمكن رفع الصور بإستخدام jQuery من خلال عمل نموذج form يحتوي على الخاصية enctype بقيمة multipart/form-data وعمل عنصر input من نوع file في هذا النموذج وإعطائه القيمة multiple كالتالي:

<h3>Ajax Image Uploader</h3>
<form action="uploader.php" method="post" enctype="multipart/form-data" id="upload_form">
    <input name="files" type="file" multiple />
    <input name="submit" type="submit" value="Start"/>
</form>

كما ستحتاج إلى إضافة شريط التحميل من خلال عمل عنصر div وإعطائه بعض خصائص CSS كالتالي:

<div id="progress-wrapper">
  <div class="progressbar"></div><!-- شريط التحميل نفسه -->
  <div class="status">0%</div><!-- نسبة التحميل -->
</div>

<!-- في حالة حدوث خطأ أو مشكلة سيتم عرضها هنا -->
<div id="output"><!-- error or success results --></div>

#progress-wrapper {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    border-radius: 3px;
    margin: 10px;
    text-align: left;
    background: #fff;
}
#progress-wrapper .progressbar{
    height: 20px;
    border-radius: 3px;
    background-color: #f39ac7;
    width: 0;
}
#progress-wrapper .status{
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}

ملاحظة: ليس عليك إتباع نفس طريقة التنظيم أو تنسيقات CSS فهي مجرد مثال وسأترك هذا الأمر لك لتقوم به.

الأمر الأخير هو إرسال الصورة إلى الخادم من خلال عمل طلبات XMLHttpRequest  بإستخدام ajax في jQuery كالتالي:

$.ajax({
	url : post_url,
	type: "POST",
	data : form_data,
	contentType: false,
	cache: false,
	processData:false,
	xhr: function(){
      
		// upload Progress
		var xhr = $.ajaxSettings.xhr();
		if (xhr.upload) {
			xhr.upload.addEventListener('progress', function(event) {
				var percent = 0;
				var position = event.loaded || event.position;	// حجم ما تم إرساله
				var total = event.total;	// حجم الملف الكلي
              
				// حساب النسبة المئوية لما تم إرساله
				if (event.lengthComputable) {
					percent = Math.ceil(position / total * 100);
				}
              
				// تحديث شريط التحميل
				$(progress_bar_id +" .progressbar").css("width", + percent +"%");	// تغير طول العنصر .progressbar
				$(progress_bar_id + " .status").text(percent +"%");	// كتابة نسبة التحميل 
			}, true);
		}
		return xhr;
	},
	mimeType:"multipart/form-data"
}).done(function(res){ // بعد إتمام التحميل
	$(my_form_id)[0].