عنوان:

‫بررسی سایز و پسوند فایل آپلود شده قبل از ارسال به سرور


نویسنده: شاهین کیاست
تاریخ: ۱۳۹۱/۰۵/۱۲ ۱۳:۴۳
آدرس: www.dntips.ir
می توان قبل از اینکه کاربر فایلی را سمت سرور ارسال کند پسوند فایل را چک کرد و از یک رفت و برگشت بیهوده به سرور جلوگیری کرد .
یک پیاده سازی ساده به کمک jQuery :
var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}
 
 در کد بالا ابتدا پسوند فایل انتخاب شده توسط کاربر پیدا می‌شود ، سپس به کمک متد inArray با آرایه ای از پسوند‌های دلخواه ما مقایسه می‌شود و در صورت معتبر نبودن پیغامی به کاربر نشان می‌دهد.
کد بالا را می‌توان در رویداد Change کنترل فایل یا در هنگام Post شدن Form اطلاعات قرار داد.
کاملا واضح است که این روش را می‌توان به راحتی دور زد و نباید به آن اکتفا کرد.
مثال این روش را اینجا بررسی کنید.
بررسی سایز فایل :
در اکثر برنامه‌های تحت وب کاربرها محدود به Upload فایل تا سایز خاصی هستند ، این مورد را هم می‌توان قبل از Upload کنترل و اعتبارسنجی کرد : 
//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});
این روش تا زمانی که کاربر JavaScript را غیر فعال نکرده قابل اطمینان است.

نظرات

  • مهمان در ۱۳۹۱/۰۵/۱۲ ۱۸:۱۱

    سلام؛ با تشکر.

    اگر در همینجا بخواهیم مانع ارسال فایل بشویم چکار باید کرد؟ مثلا الان فقط یک پیغام نمایش می‌دهد، اما مانع ارسال نمی‌شود.

    • وحید نصیری در ۱۳۹۱/۰۵/۱۲ ۲۳:۴۸
      می‌تونید بجای alert قابلیت کلیک رو از یک دکمه (ارسال فایل به سرور) بگیرید:
      $("#btn1").unbind("click");

  • مهمان در ۱۳۹۱/۰۵/۱۵ ۱۵:۵۸
    سلام 
    ببخشید قسمت دوم که نمایش سایز فایل است را من هر کاری کردم نتونستم انجام بدم.
    یه HTML ساده ساختم و کدهای شما رو روش قرار دادم ولی هیچ اتفاقی نیافتاد.
    البته اینم بگم که رو سایت jsfiddle  جواب میده و مشکلی نیست ، می‌خواهم بدونم که به جز Library jQuery آیا چیز دیگری باید اضافه کنم ؟
    ممنون میشم اگه فایل تستی هم قرار بدید
    • وحید نصیری در ۱۳۹۱/۰۵/۱۵ ۱۶:۲۰
      این رو با فایرفاکس تست کردم جواب داد ولی با IE به نظر کار نمی‌کنه.
      • شاهین کیاست در ۱۳۹۱/۰۵/۱۵ ۱۶:۴۳
        HTML 5 File API در IE 9 پشتیبانی نمیشه ، اما انگار تا حدودی در IE 10 پشتیبانی میشه .
        فکر می‌کنم یک راه برای پشتیبانی در IE استفاده از ActiveXObject هست ، اما خب مشکلی که هست به صورت پیشفرض غیر فعال هست.این در صورت فعال بودن ActiveX باید کار کنه.
    • شاهین کیاست در ۱۳۹۱/۰۵/۱۵ ۱۶:۴۵
      @شهروز
      سلام ، 
      اگر از IE استفاده می‌کنید رجوع کنید به پاسخی که زیر کامنت آقای نصیری نوشتم.
      اگر نه به کمک FireBug در FireFox متن خطا را پیدا کنید.
      آخر وقت امروز یک مثال در انتهای پست اضافه می‌کنم.
      • مهمان در ۱۳۹۱/۰۵/۱۶ ۹:۵۴
        سلام
        بله درسته من با IE چک کرده بودم ، بعدش با Chrome چک کردم درست بود پس فکر کنم IE هنوز ساپورتش نمی‌کنه
        ممنون