[jQuery] التحقق من ابعاد الصورة قبل الرفع

محمد المصري12 · 20 نوفمبر 2021

سلام عليكم

عملت سكربت للتحقق من امتداد الصورة و حجمها و ابعادها قبل رفعها

    $(document).ready(function(){
        $(".img-validate").change(function(){
            var allowedTypes = [ 'image/jpeg', 'image/gif', 'image/png'];
            
            var file = this.files[0];
            
            var height = this.height;
            
            var width = this.width;

            var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
            
            var fileSize = this.files[0].size;
            
          // التحقق من الملف من خلال صيغته
            
            if (!file.name.endsWith('.jpg') && !file.name.endsWith('.jpeg') && !file.name.endsWith('.png') && !file.name.endsWith('.gif')){
                alert('Restricted File Type, Please Select only image files');
                $(".img-validate").val('');
                return false;
            } 
          // التحقق من ابعاد الصورة
            else if (height > 200 || width > 200) {
                alert('Dimention is too Large ');
                $(".img-validate").val('');
                return false;
            }
          // التحقق من حجم الملف
            else if (fileSize > MAX_FILE_SIZE) {
                alert('الحد الاقصى للصورة 5 ميجابايت');
                $(".img-validate").val('');
            }
            else {
                this.setCustomValidity("");
            }
        });
    });

الشرط الخاص بالتحقق من الامتداد يعمل و ممتاز جدا

الشرط الخاص بالتحقق من حجم الملف يعمل و ايضا ممتاز

اما الشرط الخاص بالتحقق من ابعاد الصورة كأنه مش مكتوب ، لا يعمل نهائيا

ما هو الخطأ

محمد أبو عواد · 20 نوفمبر 2021

عندما تقوم باختيار صورة فهو لن يتعامل معها كصورة بل سوف يتعامل معها كملف , وبشكل منطقي لا يمكننا أن نحسب الارتفاع والعرض لملف ما , نريد أن نقوم بتعريف البرنامج أن ما قمنا برفعه بالفعل هو صورة , وذلك عن طريق انشاء كائن جديد من Image , ثم نستخدم الدالة onload بمجرد أن تقوم الصورة بالتحميل يحسب الارتفاع والعرض الخاص بها , فيكون شكل الكود كالتالي

                var _URL = window.URL || window.webkitURL;
                var img, width, height;
                img = new Image();
                img.onload = function () {
                    width = this.width
                    height = this.height
                    // التحقق من ابعاد الصورة
                    if (height > 200 || width > 200) {
                        alert('Dimention is too Large ');
                        $(".img-validate").val('');
                        return false;
                    }
                };
                img.src = _URL.createObjectURL(file);

قمت بتعريف متغيرات img لتخزين كائن image بداخله , ومتغيرات الطول والعرض لتخزين الطول والعرض , ثم بعد تحميل الصورة سيقوم الكود بتخزين طول وعرض الصورة في المتغيرات الخاصة بها , ثم سوف يتم فحص أبعاد الصورة , بهذه الطريقة يمكن فحص طول وعرض الصورة , شكل الكود بشكل كامل

   <script>
        $(document).ready(function () {

            $("#img-validate").change(function () {
                var allowedTypes = ['image/jpeg', 'image/gif', 'image/png'];
                var file = this.files[0];

                var _URL = window.URL || window.webkitURL;
                var img, width, height;
                img = new Image();
                img.onload = function () {
                    width = this.width
                    height = this.height
                    // التحقق من ابعاد الصورة
                    if (height > 200 || width > 200) {
                        alert('Dimention is too Large ');
                        $(".img-validate").val('');
                        return false;
                    }
                };
                img.src = _URL.createObjectURL(file);

                var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
                var fileSize = this.files[0].size;
                // التحقق من الملف من خلال صيغ
                if (!file.name.endsWith('.jpg') && !file.name.endsWith('.jpeg') && !file
                    .name.endsWith('.png') && !file.name.endsWith('.gif')) {
                    alert('Restricted File Type, Please Select only image files');
                    $(".img-validate").val('');
                    return false;
                }
                

                // التحقق من حجم الملف
                else if (fileSize > MAX_FILE_SIZE) {
                    alert('الحد الاقصى للصورة 5 ميجابايت');
                    $(".img-validate").val('');
                } else {
                    this.setCustomValidity("");
                }
            });
        });
    </script>

أسامة زيادة · 20 نوفمبر 2021

clientWidth و clientHeight هما خصائص DOM تعرض الحجم الحالي في المتصفح للأبعاد الداخلية لعنصر DOM (باستثناء الهامش والحد). لذلك في حالة عنصر IMG , سيحصل هذا على الأبعاد الفعلية للصورة المرئية . لذلك يمكنك جلب الصورة باستخدام getElementById

var img = document.getElementById('imageid');

فيمكنك جلب العرض بهذه الطريقة

var width = img.clientWidth;

فيمكنك جلب الارتفاع بهذه الطريقة

var height = img.clientHeight;

أو يمكنك عند رفع الصورة يمكنك عرضها في وسم img كما في الشكل التالي

<img src="img.png">

فيمكنك جلب naturalHeight و هو الارتفاع الطبيعي للصورة من خلال

document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;

سامح أشرف · 20 نوفمبر 2021

يمكنك أن تستعمل promise لعمل دالة تقوم بالتحقق أولًا من طول وعرض الصورة عبر الكائن Image، كالتالي:

const imageDimensions = (file) =>
  new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img;
      resolve({ width, height });
    };

    img.onerror = () => {
      reject("There was some problem with the image.");
      $(".img-validate").val("");
    };

    img.src = URL.createObjectURL(file);
  });

ثم نقوم بإستعمال هذه الدالة على الشكل التالي:

$(document).ready(function () {
  $(".img-validate").change(function () {
    var allowedTypes = ["image/jpeg", "image/gif", "image/png"];
    var file = this.files[0];

    imageDimensions(file).then((sizes) => {
      var height = sizes.height;
      var width = sizes.width;

      var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
      var fileSize = this.files[0].size;

      // التحقق من الملف من خلال صيغته
      if (
        !file.name.endsWith(".jpg") &&
        !file.name.endsWith(".jpeg") &&
        !file.name.endsWith(".png") &&
        !file.name.endsWith(".gif")
      ) {
        alert("Restricted File Type, Please Select only image files");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من ابعاد الصورة
      else if (height > 200 || width > 200) {
        alert("Dimention is too Large ");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من حجم الملف
      else if (fileSize > MAX_FILE_SIZE) {
        alert("الحد الاقصى للصورة 5 ميجابايت");
        $(".img-validate").val("");
      } else {
        this.setCustomValidity("");
      }
    });
    
  });
});

أو يمكنك أن تقوم بوضع كل الكود في داخل الحدث onload كالتالي:

$(document).ready(function () {
  $(".img-validate").change(function () {
    var allowedTypes = ["image/jpeg", "image/gif", "image/png"];
    var file = this.files[0];
    const img = new Image();
    
    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img;
      var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
      var fileSize = this.files[0].size;
      alert(file.name)

      // التحقق من الملف من خلال صيغته
      if (
        !file.name.endsWith(".jpg") &&
        !file.name.endsWith(".jpeg") &&
        !file.name.endsWith(".png") &&
        !file.name.endsWith(".gif")
      ) {
        alert("Restricted File Type, Please Select only image files");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من ابعاد الصورة
      else if (height > 200 || width > 200) {
        alert("Dimention is too Large ");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من حجم الملف
      else if (fileSize > MAX_FILE_SIZE) {
        alert("الحد الاقصى للصورة 5 ميجابايت");
        $(".img-validate").val("");
      } else {
        this.setCustomValidity("");
        alert('done')
      }
    };
    
    img.onerror = () => {
      alert("Restricted File Type, Please Select only image files");
      $(".img-validate").val("");
    };
    
    img.src = URL.createObjectURL(file);
    
  });
});

مع العلم أن في حالة إستخدام أي طريقة من هذه الطرق لن تحتاج إلى التأكد من أن الملف عبارة عن صورة، لأن الكائن Image سوف يقوم بتشعيل الحدث onerror في حالة فشله لتحميل الصورة وهذا ما يحدث عند تحميل أي نوع آخر من الملفاـ، ولكن مازال يمكنك التحقق من صيفة الملف بدون مشكلة.

محمد المصري12 · 20 نوفمبر 2021

بتاريخ 1 ساعة قال محمد أبو عواد:

عندما تقوم باختيار صورة فهو لن يتعامل معها كصورة بل سوف يتعامل معها كملف , وبشكل منطقي لا يمكننا أن نحسب الارتفاع والعرض لملف ما , نريد أن نقوم بتعريف البرنامج أن ما قمنا برفعه بالفعل هو صورة , وذلك عن طريق انشاء كائن جديد من Image , ثم نستخدم الدالة onload بمجرد أن تقوم الصورة بالتحميل يحسب الارتفاع والعرض الخاص بها , فيكون شكل الكود كالتالي


                var _URL = window.URL || window.webkitURL;
                var img, width, height;
                img = new Image();
                img.onload = function () {
                    width = this.width
                    height = this.height
                    // التحقق من ابعاد الصورة
                    if (height > 200 || width > 200) {
                        alert('Dimention is too Large ');
                        $(".img-validate").val('');
                        return false;
                    }
                };
                img.src = _URL.createObjectURL(file);

قمت بتعريف متغيرات img لتخزين كائن image بداخله , ومتغيرات الطول والعرض لتخزين الطول والعرض , ثم بعد تحميل الصورة سيقوم الكود بتخزين طول وعرض الصورة في المتغيرات الخاصة بها , ثم سوف يتم فحص أبعاد الصورة , بهذه الطريقة يمكن فحص طول وعرض الصورة , شكل الكود بشكل كامل


   <script>
        $(document).ready(function () {

            $("#img-validate").change(function () {
                var allowedTypes = ['image/jpeg', 'image/gif', 'image/png'];
                var file = this.files[0];

                var _URL = window.URL || window.webkitURL;
                var img, width, height;
                img = new Image();
                img.onload = function () {
                    width = this.width
                    height = this.height
                    // التحقق من ابعاد الصورة
                    if (height > 200 || width > 200) {
                        alert('Dimention is too Large ');
                        $(".img-validate").val('');
                        return false;
                    }
                };
                img.src = _URL.createObjectURL(file);

                var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
                var fileSize = this.files[0].size;
                // التحقق من الملف من خلال صيغ
                if (!file.name.endsWith('.jpg') && !file.name.endsWith('.jpeg') && !file
                    .name.endsWith('.png') && !file.name.endsWith('.gif')) {
                    alert('Restricted File Type, Please Select only image files');
                    $(".img-validate").val('');
                    return false;
                }
                

                // التحقق من حجم الملف
                else if (fileSize > MAX_FILE_SIZE) {
                    alert('الحد الاقصى للصورة 5 ميجابايت');
                    $(".img-validate").val('');
                } else {
                    this.setCustomValidity("");
                }
            });
        });
    </script>

شكرا لك باش مهندس محمد ابو عواد

المشكلة الان انه رافض كل الصور حتى لو ابعادها اقل من 200 و هو الشرط المطلوب

اي صورة بيرفضها و يديني رسالة الخطأ الخاصة بالابعاد

بتاريخ منذ ساعة مضت قال سامح أشرف:

يمكنك أن تستعمل promise لعمل دالة تقوم بالتحقق أولًا من طول وعرض الصورة عبر الكائن Image، كالتالي:


const imageDimensions = (file) =>
  new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img;
      resolve({ width, height });
    };

    img.onerror = () => {
      reject("There was some problem with the image.");
    };

    img.src = URL.createObjectURL(file);
  });

ثم نقوم بإستعمال هذه الدالة على الشكل التالي:


$(document).ready(function () {
  $(".img-validate").change(function () {
    var allowedTypes = ["image/jpeg", "image/gif", "image/png"];
    var file = this.files[0];

    imageDimensions(file).then((sizes) => {
      var height = sizes.height;
      var width = sizes.width;

      var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
      var fileSize = this.files[0].size;

      // التحقق من الملف من خلال صيغته
      if (
        !file.name.endsWith(".jpg") &&
        !file.name.endsWith(".jpeg") &&
        !file.name.endsWith(".png") &&
        !file.name.endsWith(".gif")
      ) {
        alert("Restricted File Type, Please Select only image files");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من ابعاد الصورة
      else if (height > 200 || width > 200) {
        alert("Dimention is too Large ");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من حجم الملف
      else if (fileSize > MAX_FILE_SIZE) {
        alert("الحد الاقصى للصورة 5 ميجابايت");
        $(".img-validate").val("");
      } else {
        this.setCustomValidity("");
      }
    });
    
  });
});

أو يمكنك أن تقوم بوضع كل الكود في داخل الحدث onload كالتالي:


$(document).ready(function () {
  $(".img-validate").change(function () {
    var allowedTypes = ["image/jpeg", "image/gif", "image/png"];
    var file = this.files[0];
    const img = new Image();
    
    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img;
      var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
      var fileSize = this.files[0].size;
      alert(file.name)

      // التحقق من الملف من خلال صيغته
      if (
        !file.name.endsWith(".jpg") &&
        !file.name.endsWith(".jpeg") &&
        !file.name.endsWith(".png") &&
        !file.name.endsWith(".gif")
      ) {
        alert("Restricted File Type, Please Select only image files");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من ابعاد الصورة
      else if (height > 200 || width > 200) {
        alert("Dimention is too Large ");
        $(".img-validate").val("");
        return false;
      }
      // التحقق من حجم الملف
      else if (fileSize > MAX_FILE_SIZE) {
        alert("الحد الاقصى للصورة 5 ميجابايت");
        $(".img-validate").val("");
      } else {
        this.setCustomValidity("");
        alert('done')
      }
    };
    
    img.onerror = () => {
      alert("Restricted File Type, Please Select only image files");
      $(".img-validate").val("");
    };
    
    img.src = URL.createObjectURL(file);
    
  });
});

شكرا لك اخي الكريم

تطلع معي نفس النتيجة اللي اخبرني بها المهندس محمد

بيرفض اي صورة حتى الصور اللي حققت الشرط بيرفضها

تم التعديل في 20 نوفمبر 2021 بواسطة محمد المصري5

محمد المصري12 · 20 نوفمبر 2021

بتاريخ منذ ساعة مضت قال أسامة زيادة:
clientWidth و clientHeight هما خصائص DOM تعرض الحجم الحالي في المتصفح للأبعاد الداخلية لعنصر DOM (باستثناء الهامش والحد). لذلك في حالة عنصر IMG , سيحصل هذا على الأبعاد الفعلية للصورة المرئية . لذلك يمكنك جلب الصورة باستخدام getElementById
var img = document.getElementById('imageid');
فيمكنك جلب العرض بهذه الطريقة
var width = img.clientWidth;
فيمكنك جلب الارتفاع بهذه الطريقة
var height = img.clientHeight;
أو يمكنك عند رفع الصورة يمكنك عرضها في وسم img كما في الشكل التالي
<img src="img.png">
فيمكنك جلب naturalHeight و هو الارتفاع الطبيعي للصورة من خلال
document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;

جربت اخي الفاضل هذه الطريقة لكن ايضا كما حدث مع الاساتذة الافاضل

يرفض اي صورة حتى و ان لم تحقق الشرط

<script>
    $(document).ready(function(){
        $(".img-validate").change(function(){
            var allowedTypes = [ 'image/jpeg', 'image/gif', 'image/png'];

            var file = this.files[0];
            var fileSize = this.files[0].size;
            var img = document.getElementById('img');

            var width = img.clientWidth;
            var height = img.clientHeight;

              var MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB



            // التحقق من الملف من خلال صيغته

            if (!file.name.endsWith('.jpg') && !file.name.endsWith('.jpeg') && !file.name.endsWith('.png') && !file.name.endsWith('.gif')){
                alert('Restricted File Type, Please Select only image files');
                $(".img-validate").val('');
                return false;
            }

else if (width > 200){
                alert('stooooppppp');
                $(".img-validate").val('');
                return false;
            }
            else if (fileSize > MAX_FILE_SIZE) {
                alert('الحد الاقصى للصورة 5 ميجابايت');
                $(".img-validate").val('');
            }
            else {
                this.setCustomValidity("");
            }
        });
    });
</script>

سامح أشرف · 20 نوفمبر 2021

بتاريخ 50 دقائق مضت قال محمد المصري5:

شكرا لك اخي الكريم

تطلع معي نفس النتيجة اللي اخبرني بها المهندس اسلام

بيرفض اي صورة حتى الصور اللي حققت الشرط بيرفضها

يمكنك تجربة الكود هنا، حيث يبدو انه يعمل بدون مشكلة بالنسبة للصور التي لها طول وعرض أقل من 200 بيكسيل

يمكنك التأكد من طول وعرض الصورة من خلال الضغط عليها بالزر الأيمن للفأرة وإختيار properties ثم التبويبت details وستجد عرض وطول الصورة

محمد المصري12 · 20 نوفمبر 2021

بتاريخ 28 دقائق مضت قال سامح أشرف:

يمكنك تجربة الكود هنا، حيث يبدو انه يعمل بدون مشكلة بالنسبة للصور التي لها طول وعرض أقل من 200 بيكسيل

يمكنك التأكد من طول وعرض الصورة من خلال الضغط

عليها بالزر الأيمن للفأرة وإختيار properties ثم التبويبت details وستجد عرض وطول الصورة

نجحت العملية ، شكرا جزيلا لك و لكل الاساتذة الافاضل

[jQuery] التحقق من ابعاد الصورة قبل الرفع

السؤال

محمد المصري12

7 أجوبة على هذا السؤال

Recommended Posts

محمد أبو عواد

أسامة زيادة

سامح أشرف

محمد المصري12

محمد المصري12

سامح أشرف

محمد المصري12

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية