Demo-Preview Image and its name ,size ,type before upload
Step1-Create a input field in a form
<p id="fp"> </p> <img id="output_image" height="100px" width="100px"/> <form id="uploadForm" action="" method="post"> <label>Upload Image File:</label> <input name="uploadImg" id="img" type="file" class="demoInputBox" accept="image/*" onchange="preview_image(event)"/> <br> </form>
ste2- create a script
<script type='text/javascript'> function preview_image(event) { var reader = new FileReader(); reader.onload = function() { var output = document.getElementById('output_image'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); var fi = document.getElementById('img'); // GET THE FILE INPUT. // VALIDATE OR CHECK IF ANY FILE IS SELECTED. if (fi.files.length > 0) { // RUN A LOOP TO CHECK EACH SELECTED FILE. for (var i = 0; i <= fi.files.length - 1; i++) { var fsize = fi.files.item(i).size; // THE SIZE OF THE FILE. var filename=fi.files.item(i).name; // THE name OF THE FILE. var filetype=fi.files.item(i).type; // THE OF THE FILE. var originalWidth=fi.files.item(i).width; var originalHeight=fi.files.item(i).height; document.getElementById('fp').innerHTML = " <b>Name :</b>" + filename; document.getElementById("fp").innerHTML = document.getElementById('fp').innerHTML + '<br /> ' + '<b>Size </b>:' + Math.round((fsize / 1024)) + '</b> KB'; document.getElementById("fp").innerHTML = document.getElementById('fp').innerHTML + '<br /> ' + " <b>Type</b> :" + filetype; } } } </script>
My name is Bhupender Kashyap i am from chandigarh,here i give infomation about blogging,php,mobile tips,web hosting,wordpress and Gk
ConversionConversion EmoticonEmoticon