آخرین بازبینی: ۱۳۹۸/۰۷/۰۷

اعتبارسنجی فایل‌های تصویر قبل از آپلود با جاوااسکریپت

فایل‌های تصویر که روی سایت آپلود می‌شوند، با مشکلات متعددی ممکن است روبرو شوند. آپلود فایل‌هایی با پسوند یا محتوای غیرمجاز، آپلود فایل‌هایی با حجم غیرمجاز و آپلود فایل‌هایی با ابعاد غیرمجاز از جمله مشکلاتی هستند که بسیاری مواقع در هنگام طراحی سایت و برنامه‌نویسی وب با آن روبرو هستیم.

اعتبارسنجی فایل‌های تصویر که کاربر به سایت ارسال می‌کند، لازم است تا در سمت سرور انجام شود. ولی برای افزایش کارایی و بهبود تجربه کاربری، می‌تواند بخشی از اعتبارسنجی را به صورت موازی در سمت مشتری یا فرانت‌اند نیز به انجام رسانید.

در ادامه قطعه کدی که فایل‌های انتخاب شده توسط کاربر را برای حجم و ابعاد تصویر بررسی می‌کند، مشاهده می‌کنید. بسته به نیاز ممکن است لازم شود تا بخش‌هایی از کد را برای استفاده در محیط واقعی تغییر دهید.

document.getElementById( 'file' ).addEventListener( 'change', checkFileSize );

function checkFileSize( evt ) {

	if( this.files.length ) {
		
		if( this.files[ 0 ].size > 4 * 1024 * 1024 ) {
			this.value = '';
			alert( 'حداکثر حجم مجاز برای آپلود ۴ مگابایت است' );
			return;
		}
		
		var url = URL.createObjectURL( this.files[ 0 ] );
		var img = new Image;
		img.fileInput = this;
		img.onload = checkImgSize;
		img.onerror = imageError;
		img.src = url;
	}
}

function checkImgSize( evt ) {
	
	if( this.width > 3000 || this.height > 3000 ) {
		this.fileInput.value = '';
		alert( 'ابعاد تصویر انتخاب شده نمی‌تواند بیش از ۳۰۰۰ پیکسل باشد' );
	}
	
}

function imageError( evt ) {
	this.fileInput.value = '';
	alert( 'فایل مورد نظر یک تصویر نیست' );
}

document.getElementById( 'file' ).addEventListener( 'change', checkFileSize );

function checkFileSize( evt ) {

if( this.files.length ) {

if( this.files[ 0 ].size > 4 * 1024 * 1024 ) {

this.value = '';

alert( 'حداکثر حجم مجاز برای آپلود ۴ مگابایت است' );

return;

}

var url = URL.createObjectURL( this.files[ 0 ] );

var img = new Image;

img.fileInput = this;

img.onload = checkImgSize;

img.onerror = imageError;

img.src = url;

}

function checkImgSize( evt ) {

if( this.width > 3000 || this.height > 3000 ) {

this.fileInput.value = '';

alert( 'ابعاد تصویر انتخاب شده نمی‌تواند بیش از ۳۰۰۰ پیکسل باشد' );

}

function imageError( evt ) {

this.fileInput.value = '';

alert( 'فایل مورد نظر یک تصویر نیست' );

}

در این قطعه کد از قابلیت‌های جدید که در مرورگرهای مدرن موجود هستند استفاده شده است و بخش‌هایی از این کدها روی مرورگرهای قدیمی به ویژه IE قابل استفاده نیست.

ابعاد مجاز تصویر در این مثال ۳۰۰۰ پیکسل و حجم مجاز ۴ مگابایت در نظر گرفته شده است. هنگامی که برنامه‌ی شما نیاز است تا روی گوشی‌های هوشمند مورد استفاده قرار گیرد، این محدودیت‌ها ممکن است باعث ایجاد مشکلات زیادی برای استفاده کنندگان شود. زیرا دوربین گوشی‌های هوشمند، تصاویری معمولا بزرگ و با حجم زیاد تولید می‌کنند.

اعتبارسنجی فایل‌های تصویر قبل از آپلود با جاوااسکریپت

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ