اعتبار سنجی سایز تصویر قبل از Upload با استفاده از HTML5 , JavaScript , JQuery

دوشنبه 31 فروردین 1394

در این مقاله نحوه اعتبار سنجی تصویر قبل از ارسال به سمت سرور با استفاده از HTML5 , JavaScript , JQuery را شرح خواهیم داد

اعتبار سنجی سایز تصویر قبل از Upload با استفاده از HTML5 , JavaScript , JQuery

HTML5 به توسعه دهندگان وب کمک می کند که به جزئیات فایل دسترسی داشته باشند .به عنوان مثال میتوانند طول و عرض فایل را مشاهده کنند .

اعتبارسنجی تصویر با استفاده از JavaScript و JQuery :

در ادامه تگ HTML که شامل یک کنترل FileUpload و یک دکمه میباشد .زمانی که بر روی دکمه کلیک شد یک تابع با نام Upload اجرا میشود .

در داخل این تابع ابتدا نوع فایل انتخاب شده را بررسی میکند و هنگامی که از صحت پسوند فایل اطمینان حاصل شد , سپس با استفاده از HTML5 FileReader API فایل تصویر را دریافت میکند و آنرا بر اساس رشته Base64 فراخوانی میکند و با استفاده از جاوا اسکریپت شئی فراخوانی شده را به عنوان تصویر شناسایی میکند .

در آخر در داخل رویداد Onload مربوط به جاوااسکریپت ابعاد تصویر انتخاب شده توسط کاربر بررسی می شود . در ادامه میتوانید تابع کامل را مشاهده کنید :


<input type="file" id="fileUpload" />
<input type="button" value="Upload" onclick="return Upload()" />
<script type="text/javascript">
function Upload() {
    //Get reference of FileUpload.
    var fileUpload = document.getElementById("fileUpload");
 
    //Check whether the file is valid Image.
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
    if (regex.test(fileUpload.value.toLowerCase())) {
 
        //Check whether HTML5 is supported.
        if (typeof (fileUpload.files) != "undefined") {
            //Initiate the FileReader object.
            var reader = new FileReader();
            //Read the contents of Image File.
            reader.readAsDataURL(fileUpload.files[0]);
            reader.onload = function (e) {
                //Initiate the JavaScript Image object.
                var image = new Image();
 
                //Set the Base64 string return from FileReader as source.
                image.src = e.target.result;
                       
                //Validate the File Height and Width.
                image.onload = function () {
                    var height = this.height;
                    var width = this.width;
                    if (height > 100 || width > 100) {
                        alert("Height and Width must not exceed 100px.");
                        return false;
                    }
                    alert("Uploaded image has valid Height and Width.");
                    return true;
                };
 
            }
        } else {
            alert("This browser does not support HTML5.");
            return false;
        }
    } else {
        alert("Please select a valid Image file.");
        return false;
    }
}
</script>

با استفاده از تابع بالا ابتدا پسوند فایل بررسی میشود .سپس ابعاد تصویر انتخاب شده بررسی می شود .

اعتبارسنجی ابعاد تضاویر قبل از Upload با استفاده از JQuery :

ابتدا یک کنترل FileUpload و یک دکمه در صفحه قرار می دهیم و زمانی که دکمه کلیک شد رویداد کلیک دکمه اجرا میشود . در داخل رویداد مربوط به JQuery مانند تابع جاوا اسکریپت ابتدا از صحت فایل انتخاب شده اطمینان خاصل میشود .سپس با استفاده از FileRader API مربوط به HTML5 بر اساس رشته Base64 فایل به پسوند فایل به عنوان تصویر شناخته می شود .در آخر مانند تابعی که در جاوا اسکریپت ذکر شد , ابعاد تصویر بررسی می شود .


<input type="file" id="fileUpload" />
<input id="upload" type="button" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#upload").bind("click", function () {
        //Get reference of FileUpload.
        var fileUpload = $("#fileUpload")[0];
 
        //Check whether the file is valid Image.
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {
            //Check whether HTML5 is supported.
            if (typeof (fileUpload.files) != "undefined") {
                //Initiate the FileReader object.
                var reader = new FileReader();
                //Read the contents of Image File.
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {
                    //Initiate the JavaScript Image object.
                    var image = new Image();
                    //Set the Base64 string return from FileReader as source.
                    image.src = e.target.result;
                    image.onload = function () {
                        //Determine the Height and Width.
                        var height = this.height;
                        var width = this.width;
                        if (height > 100 || width > 100) {
                            alert("Height and Width must not exceed 100px.");
                            return false;
                        }
                        alert("Uploaded image has valid Height and Width.");
                        return true;
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    });
});
</script>

 

 

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید