Can someone assist me in understanding and modifying this code?
Here is the code snippet:
<table>
<tr>
<td>
<img src="" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">
<input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp" style="display:none;">
</td>
<td>
<img src="" id="img2" class="img2" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">
<input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp" style="display:none;"><br>
</td>
</tr>
<tr>
<td>
<input type="button" name="" value="Seleccionar header" id="browse_file" class="btn btn-danger form-control">
</td>
<td>
<input type="button" name="" value="Seleccionar home" id="browse_file2" class="btn btn-danger form-control">
</td>
</tr>
</table>
Additionally, here is the accompanying JavaScript code:
$("#browse_file").on('click',function(e){
$("#pathheader").click();
})
$("#browse_file2").on('click',function(e){
$("#pathhome").click();
})
$("#pathheader").on('change',function(e){
var fileInput=this;
if (fileInput.files[0])
{
var reader=new FileReader();
reader.onload=function(e)
{
$("#img").attr('src',e.target.result);
}
reader.readAsDataURL(fileInput.files[0]);
}
})
$("#pathhome").on('change',function(e){
var fileInput=this;
if (fileInput.files[0])
{
var reader=new FileReader();
reader.onload=function(e)
{
$("#img2").attr('src',e.target.result);
}
reader.readAsDataURL(fileInput.files[0]);
}
})
I have seen a solution using Ajax to hide the icon image while keeping the background and border styles intact. Can anyone guide me on how to implement this with Ajax or even with CSS?
Your help will be greatly appreciated. Thank you.