獲取圖像路徑，寬度和高度，並通過上傳圖像將它們放入輸入字段

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;"/>
• 添加：取網址並載入圖像插入圖像加載隱藏的img標籤
• ：獲取寬度和heigth

爲了上傳這些數據，您需要將表格封裝成表格或使用以及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>