Get image path, width and height and put them into input fields by uploading an image

Question

I have a form with several text inputs and one file input.

<table>

<tr>
<td>PlanID *</td>
<td><input type="file" name="file" id="file" placeholder="file" /></td>
</tr>
<tr>
<td>&nbsp</td>
</tr>
<tr>
<td>URL *</td>
<td><input type="text" name="url" id="url" placeholder="Image URL" /></td>
</tr>
<tr>
<td>&nbsp</td>
</tr>
<tr>
<td>Height *</td>
<td><input type="number" name="height" id="height" placeholder="Height" />     
</td>
</tr>
<tr>
<td>&nbsp</td>
</tr>
<tr>
<td>width *</td>
<td><input type="number" name="width" id="width" placeholder="Width" /></td>
</tr>
<tr>
<td>&nbsp</td>
</tr>
<tr>
<td><input type="submit" name="sub" id="sub" value="Upload"       
class="buttons"/></td>
<td><input type="reset" name="res" id="res" value="Cancel" class="buttons"/>   
</td>
</tr>


</table>

I need to fill these URL, width and height fields in particular details by uploading an image. How could I do this??

Answer 1

My proposal is:

• add after input type file <img id="imgTogetWidthAndHeight" src="" style="display: none;"/>
• on file change: get the url and load image into the hidden img tag
• on image load: get width and heigth

In order to upload these data you need to wrap your table in a form or use and ajax call or plugin.

 $(function () { $('#file').on('change', function(e) { var tmppath = URL.createObjectURL(e.target.files[0]); $("#imgTogetWidthAndHeight").attr('src',tmppath); var url = $(this).val(); $('#url').val(url); }); $("#imgTogetWidthAndHeight").on('load', function(e) { var width = parseInt($("#imgTogetWidthAndHeight").css('width')); var height = parseInt($("#imgTogetWidthAndHeight").css('height')); $('#width').val(width); $('#height').val(height); }); }); 

 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <table> <tr> <td>PlanID *</td> <td><input type="file" name="file" id="file" placeholder="file"/><img id="imgTogetWidthAndHeight" src="" style="display: none;"/></td> </tr> <tr> <td>&nbsp</td> </tr> <tr> <td>URL *</td> <td><input type="text" name="url" id="url" placeholder="Image URL"/></td> </tr> <tr> <td>&nbsp</td> </tr> <tr> <td>Height *</td> <td><input type="number" name="height" id="height" placeholder="Height"/> </td> </tr> <tr> <td>&nbsp</td> </tr> <tr> <td>width *</td> <td><input type="number" name="width" id="width" placeholder="Width"/></td> </tr> <tr> <td>&nbsp</td> </tr> <tr> <td><input type="submit" name="sub" id="sub" value="Upload" class="buttons"/></td> <td><input type="reset" name="res" id="res" value="Cancel" class="buttons"/> </td> </tr> </table>