The capability of uploading and create image thumbnails is one of the most important requirements for most web application developers and Codeigniter provides file upload and file resize feature. The Codeigniter Library for image Upload and Resize Image is very…
Expand +
Preview image functionality can be easily implemented using jQuery before uploading and rotating image element functionality. You can rotate the image at a particular angle and use PHP to upload the image to the server. In this tutorial, we’ll show…
Expand +
Now, i am going to Share: How to show image thumbnail before upload with jQuery Step 1:- Put the following code in <body></body> section.
|
2 3 4 5 |
<div id="previewimg"></div> <input id="upload_file" class="img" name="image" type="file" /> |
Step 2:- Put the script code in <head></head> section.
|
2 3 4 5 6 7 |
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript">// <![CDATA[ $(function() { $("#upload_file").on("change", function() { var files = !!this.files ? this.files : []; if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support if (/^image/.test( files[0].type)){ // only image file var reader = new FileReader(); // instance of the FileReader reader.readAsDataURL(files[0]); // read the local file reader.onloadend = function(){ // set image data as background of div $("#previewimg").css("background-image", "url("+this.result+")"); } } }); }); // ]]></script> |
Step 3:- Put following CSS…
Expand +