获取图像的路径，宽度和高度，并通过上传图像将其放入输入字段中

Question

我有一个带有多个文本输入和一个文件输入的表单。

<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>

我需要通过上传图片来填写这些URL，宽度和高度字段的特定细节。 我该怎么做？

Answer 1

我的建议是：

• 在输入类型文件后添加<img id="imgTogetWidthAndHeight" src="" style="display: none;"/>
• 文件更改时：获取url并将图像加载到隐藏的img标签中
• 图像加载时：获取宽度和高度

为了上传这些数据，您需要将表格包装成表格，或者使用ajax调用或插件。

 $(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>