jquery - Javascript onChange event not firing in Input type file -
i using javascript file inside 'scripts' folder checking validation such file size uploading image. however, change
event not firing. mistake in code?
var filelogo = ""; $(document).on("change", "#idfilelogo", function(e) { var file_size = $(this)[0].files[0].size; if (file_size > 1000141) { $("#txtfilelogo").attr("placeholder", "upload image"); var message = "image size greater 1mb."; showerrormesssage(message); return false; } filelogo = $(this).val(); var ext = filelogo.split('.').pop(); if (ext == "x-png" || ext == "jpeg" || ext == "gif" || ext == "jpg") { $("#txtfilelogo").attr('placeholder', $(this).val().split('\\').pop()); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" style="height: 35px !important" id="txtfilelogo" class="form-control input-lg" disabled placeholder="upload image"> <div class="input-group-btn"> <div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> browse<input type="file" accept="image/*" id="idfilelogo" name="fileuploadlogo" class="file"></div> </div>
you have problem because scripts before html tags , when scripts have been run there no "idfilelogo" tag.
put after html tags or use jquery event insure content has been loaded. example:
var filelogo = ""; $(document).ready(function() { $(document).on("change", "#idfilelogo", function(e) { var file_size = $(this)[0].files[0].size; if (file_size > 1000141) { $("#txtfilelogo").attr("placeholder", "upload image"); var message = "image size greater 1mb."; showerrormesssage(message); return false; } filelogo = $(this).val(); var ext = filelogo.split('.').pop(); if (ext == "x-png" || ext == "jpeg" || ext == "gif" || ext == "jpg") { $("#txtfilelogo").attr('placeholder', $(this).val().split('\\').pop()); } }); });
Comments
Post a Comment