Jquery Image Upload - Preview

File Upload plugin, but very lightweight without any other dependencies.Here I've made a simple object for our Image uploader which is appended to the global window object. Then I set up the script by calling the function with a css selector using the standard jQuery ready method.The below code you are using preview and delete the image in the same place using JQuery.


 Index.html                                                                                                                                                                 Download script          
  1. <label>Logo 1 :</label> <div id="file-upload-override-button"> &nbsp; <input type='file' id="imgInp" class="file-upload-button" onchange="readURLlogo(this);" /> <span id="previewPane"> <img id="img_prev" src="#" alt="" /> <span id="removelogo1"><img src="images/Remove.png" alt=""/></span> </span> </div>

 upload.css                                                                                                                
  1. #file-upload-override-button, #file-upload-override-button-two { background-image: url("../images/upload.png"); background-repeat: no-repeat; cursor: pointer; margin-bottom: 5px; overflow: hidden; position: relative; width: 45%; } .form_wrapper input[type="text"] { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; border-radius: 3px; font-size: 0.9em; margin-top: 6px; padding: 7px; width: 50%; } #previewPane, #previewPanetwo { border: 1px solid #BDBFC1; border-radius: 5px; display: inline-block; margin-top: -40px; padding: 5px; } #removelogo1 { display: none; float: right; z-index: 200; }

 script.js                                                                                                                 
  1. var blank=""; function readURLlogo(input) { $("#previewPane").show(); $("#errors").remove(); var ext =$('#imgInp').val().match(/\.(.+)$/)[1]; if(ext=="jpg" || ext=="gif"){ $('#file-upload-override-button').css("background", "none"); $('#file-upload-override-button').removeClass("file-upload-next"); if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img_prev').attr('src', e.target.result).width(190).height(46); $('#prevlogo1').attr('src', e.target.result).width(190).height(46); }; reader.readAsDataURL(input.files[0]); } else { var img = input.value; $('#img_prev').attr('src',img).height(46); $('#prevlogo1').attr('src', img).height(46); } $("#removelogo1").show().css("margin-right","-70px").css("margin-top","-10px") }else{ $('#previewPane').append("<span id='errors'>Please upload jpg or gif format. </span>"); $('#previewPane').css("color","red"); } } $(document).ready(function() { $("#removelogo1").click(function() { $("#img_prev").attr("src",blank); $("#removelogo1").hide('slow'); $("#prevlogo1").attr("src","images/logo1.jpg"); $('#file-upload-override-button').addClass("file-upload-next"); $('#previewPane').hide("#previewPane"); }); });

Referal URL  :  http://jsfiddle.net/3MS9z/



Previous
Next Post »