נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

העלאת קובץ תמונה באמצעות jQuery ו-PHP

מחבר:
בתאריך:

במדריך זה קוד פשוט להעלאת תמונה באמצעות jQuery ו-PHP.

 

ההטמ"ל

כולל כפתור theTrigger, שלחיצה עליו מפעילה את הסקריפט שמעלה את התמונה. הסקריפט מחקה את הקלקה על שדה file (להעלאת קבצים), והתמונה מוצגת בתוך אלמנט התמונה theImage.

<img src="/placeholder.jpg" id="theImage">		

<button id="theTrigger">Upload file></button>

<input type="file" id="file" style="display:none"/>

 

קוד ה-jQuery

הקלקה על האלמנט theTrigger גורמת להפעלה לחיקוי של תוצאת הלחיצה על שדה file להעלאת קבצים על ידי המתודה trigger של jQuery.

ההקלקה על שדה ה-file קוראת לפונקציה שמקבלת את האובייקט FileList של JavaScript שמכיל את המידע אודות הקבצים שמעלים. כולל: שם הקובץ, גודל ב-bytes, סוג הקובץ (png, jpg וכיו"ב), ועוד.

הפונקציה מוודא שהקובץ מתאים לסוג הקובץ שאנחנו מצפים לו (בקוד להלן, קובץ תמונה) וגם שהקובץ אינו גדול מדי (בדוגמה, 2Mb).

במידה ועבר את הבדיקה, תוכנו של הקובץ נקרא על ידי האובייקט FileReader, ואחרי שהקריאה מסתיימת נשלח המידע ב-Ajax לצד השרת.

(function($){
  // Limit the allowed file size
  var imgSizeLimit = 2*1024*1024;

  // The FileList object represents the files uploaded with the file upload button.
  //  It contains the data for the name, size, extension and content of the files
  function uploadImages(fileList) {
        
    // The FileList object can contain several files so we need a loop
    for (var n = 0; n < fileList.length; n++) {
      var s = fileList[n];

      // Validations
      if (!s.type.match("image")) {
        alert("שגיאה! הקובץ שהעלית אינו קובץ תמונה חוקי.");
        return;
      }
			
      if(s.size > imgSizeLimit) {
        alert("התמונה גדולה מדי. לכל היותר 2 MB");
	return;
      }
            
      // The FileReader object lets apps read asynchronously the contents of files
      var r = new FileReader;

      // Read the content of the file
      r.readAsDataURL(s);
			
      // Fire after the reading of the file ended
      r.addEventListener("load", function(e) {
        // Send the data with AJAX to the server and get the response
        $.post('/create_new_img.php', {'f': e.target.result}, function(res){
          var res = JSON.parse(res);
          if(res.success === true){
            $("#theImage").attr('src', res.path);
            alert("בעיה בהעלאת התמונה");
          }
        });
      });
    }
  }
	
  // Listens to any change to the #file element
  //  then fires the uploadImages function
  //  that receives the files property
  $("#file").on("change", function(){
    uploadImages(this.files);
  });

  // Clicking #theTrigger button triggers clicking
  //  the #file element
  $("#theTrigger").on("click", function(){
    $("#file").trigger("click");
  });
}(jQuery));

 

קוד ה-PHP

קולט את המידע שנשלח מצד המשתמש. מוודא את גודל הקובץ ואת סוגו באמצעות הפונקציה getimagesize. משתמש ב-base64_decode כדי להמיר את הקובץ, והופך את זרם המידע לתמונה ממש על ידי הפונקציה file_put_contents.

<?php
if(!isset($_POST['f']) || empty($_POST['f'])) exit;

// Define the upload folder	
$destinationFolder = $_SERVER['DOCUMENT_ROOT'] . "/uploads/";	

// Maximum allowed size
$maxFileSize = 2*1024*1024;	// kb


// GET the posted data	
$file = $_POST['f'];

// getimagesize is used to get the file extension
// Only png / jpg mime types are allowed
$size = getimagesize ($file);
$ext  = $size['mime'];
if($ext == 'image/jpeg')
	$ext = '.jpg';
elseif($ext == 'image/png')
	$ext = '.png';
else
	exit(json_encode(['success'=>false, 'reason'=>'only png and jpg mime types are allowed'])); 

// Prevent the upload of large files
if(strlen(base64_decode($file)) > $maxFileSize)
	exit(json_encode(['success'=>false, 'reason'=>"file size exceeds {$maxFileSize} Mb"])); 

// Remove inline tags and spaces
$img = str_replace('data:image/png;base64,', '', $file);
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);

// Read base64 encoded string as an image
$img = base64_decode($img);

// Give the image a unique name. Don't forget the extension
$filename = date("d_m_Y_H_i_s")."-".time().$ext;

// The path to the newly created file inside the upload folder
$destinationPath = "$destinationFolder$filename";

// Create the file or return false
$success = file_put_contents($destinationPath, $img);

if(!$success) 
	exit(json_encode(['success'=>false, 'reason'=>'the server failed in creating the image']));

// Inform the browser that everything worked
exit(json_encode(['success'=>true,'path'=>'/uploads/'.$filename]));

 

 

לכל מדריכי ה-jQuery

הוסף תגובה חדשה

 

= 6 + 2