Integración de script para carga de imagen en formulario HTML con Javascript puro.
Copiar y pegar el HTML donde se mostrará la foto.
<div class="photo">
<label for="foto">Foto (570x380)</label>
<div class="prevPhoto">
<span class="delPhoto notBlock">X</span>
<label for="foto"></label>
<div>
<img id="img" src="<?= media(); ?>/images/portada_categoria.png">
</div>
</div>
<div class="upimg">
<input type="file" name="foto" id="foto">
</div>
<div id="form_alert"></div>
</div>
Copiar y pegar los estilos en el archivo con extensión CSS del proyecto donde se insertará la foto.
.prevPhoto {
display: flex;
justify-content: space-between;
width: 300px;
height: 200px;
border: 1px solid #CCC;
position: relative;
cursor: pointer;
background: url(../images/portada_categoria.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
margin: auto;
}
.prevPhoto label{
cursor: pointer;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.prevPhoto img{
width: 100%;
height: 100%;
}
.upimg, .notBlock{
display: none !important;
}
.errorArchivo{
font-size: 16px;
font-family: arial;
color: #cc0000;
text-align: center;
font-weight: bold;
margin-top: 10px;
}
.delPhoto{
color: #FFF;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 25px;
height: 25px;
background: red;
position: absolute;
right: -10px;
top: -10px;
z-index: 10;
}
#tbl_list_productos img{
width: 50px;
}
.imgProductoDelete{
width: 175px;
}
Copiar y pegar el código Javascript en el archivo de funciones del proyecto donde se integrará la foto.
if(document.querySelector("#foto")){
var foto = document.querySelector("#foto");
foto.onchange = function(e) {
var uploadFoto = document.querySelector("#foto").value;
var fileimg = document.querySelector("#foto").files;
var nav = window.URL || window.webkitURL;
var contactAlert = document.querySelector('#form_alert');
if(uploadFoto !=''){
var type = fileimg[0].type;
var name = fileimg[0].name;
if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png'){
contactAlert.innerHTML = '<p class="errorArchivo">El archivo no es válido.</p>';
if(document.querySelector('#img')){
document.querySelector('#img').remove();
}
document.querySelector('.delPhoto').classList.add("notBlock");
foto.value="";
return false;
}else{
contactAlert.innerHTML='';
if(document.querySelector('#img')){
document.querySelector('#img').remove();
}
document.querySelector('.delPhoto').classList.remove("notBlock");
var objeto_url = nav.createObjectURL(this.files[0]);
document.querySelector('.prevPhoto div').innerHTML = "<img id='img' src="+objeto_url+">";
}
}else{
alert("No selecciono foto");
if(document.querySelector('#img')){
document.querySelector('#img').remove();
}
}
}
}
if(document.querySelector(".delPhoto")){
var delPhoto = document.querySelector(".delPhoto");
delPhoto.onclick = function(e) {
removePhoto();
}
}
function removePhoto(){
document.querySelector('#foto').value ="";
document.querySelector('.delPhoto').classList.add("notBlock");
document.querySelector('#img').remove();
}
Accede al curso Premium