jQuery görüntü atma geçersiz görüntü türü ve burada

Question

Yüklenen görüntü geçerli olup olmadığını bir hatayı veya başarıyı bir uyarı kutusu alma konusunda olsun doğrular benim jQuery bit

gösterilmektedir edilir yerine uyarı kutusunun geçersiz bir ileti göster eğer

İhtiyaç çözümü için: yerine başarı veya hata işlevi bir hata varsa

dosya atılmalıdır denir bir uyarı kutusunun

1. mesajla

(benim durumumda orada kalıyor)

jQuery bit:

(function($) { 
    $.fn.checkFileType = function(options) { 
    var defaults = { 
     allowedExtensions: [], 
     success: function() {}, 
     error: function() {} 
    }; 
    options = $.extend(defaults, options); 

    return this.each(function() { 

     $(this).on('change', function() { 
      var value = $(this).val(), 
       file = value.toLowerCase(), 
       extension = file.substring(file.lastIndexOf('.') + 1); 

      if ($.inArray(extension, options.allowedExtensions) == -1) { 
       options.error(); 
       $(this).focus(); 
      } else { 
       options.success(); 

      } 

     }); 

    }); 
}; 

})(jQuery); 

function validate() { 
    $('#filen').checkFileType({ 
    allowedExtensions: ['jpg', 'jpeg', 'png', 'bmp'], 
    success: function() { 

     $("#filen").text("Valid image").show(); 
    }, 
    error: function() { 
     /*messages: { 
      filen: "Please insert valid image file with following extensions .jpg .jpeg .png .bmp" 
     },*/ 
     alert('Error: Please insert valid image file with following extensions .jpg .jpeg .png .bmp'); 
     reload("index134.html"); 
    } 
}); 

html bit: - Ayrı eleman oluşturabilir mesaj kısmı için

<tr> 
    <td><label>Insert File</label></td> 
    <td><input type="file" name="filen" id ="filen"/></td> 
</tr> 

Answer 1

1. (ı id "mesaj" ile div yarattı.
2. Alan değerini boşaltmak için another answer kodundan borç aldım.

JSFiddle

HTML eyleme neden bakınız:

<div id="message"></div> 
<table> 
    <tr> 
    <td> 
     <label>Insert File</label> 
    </td> 
    <td> 
     <input type="file" name="filen" id="filen" /> 
    </td> 
    </tr> 
</table> 

JS: anlamda

$.fn.checkFileType = function(options) { 
    var defaults = { 
    allowedExtensions: [], 
    success: function() {}, 
    error: function() {} 
    }; 
    options = $.extend(defaults, options); 

    return this.each(function() { 

    $(this).on('change', function() { 
     var value = $(this).val(), 
     file = value.toLowerCase(), 
     extension = file.substring(file.lastIndexOf('.') + 1); 

     if ($.inArray(extension, options.allowedExtensions) == -1) { 
     options.error(); 
     $(this).wrap('<form>').closest('form').get(0).reset(); 
     $(this).unwrap('<form>'); 

     $(this).focus(); 
     } else { 
     options.success(); 

     } 

    }); 

    }); 
}; 

$(function() { 
    $('#filen').checkFileType({ 
    allowedExtensions: ['jpg', 'jpeg', 'png', 'bmp'], 
    success: function() { 

     $("#message").text("Valid image").fadeIn(); 
    }, 
    error: function() { 
     $("#message").text('Error: Please insert valid image file with following extensions .jpg .jpeg .png .bmp').fadeIn(); 
    } 
    }); 
});