イメージのパス、幅、高さを取得し、画像をアップロードして入力フィールドに入力します。

Question

私はいくつかのテキスト入力と1つのファイル入力を持つフォームを持っています。

<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タグ
• にURLや負荷イメージを取得：幅と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>