Preview image

Question

Preview image

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have been trying to preview an image by just selecting it but I have not succeeded trying with this answer , I have tried to adapt it and I do not know what it fails.

//Funcion que se ejecuta al inicio
function init()
{
    mostrarform(false);
    listar();

    $("#formulario").on("submit", function(e)
    {
    guardaryeditar(e);
    })

    //Cargamos los items al select categoria
    $.post("../ajax/articulo.php?op=selectCategoria", function(r){
        $("#idcategoria").html(r);
        $("#idcategoria").selectpicker('refresh');

    });

    $("#imagenmuestra").hide();

}

//Funcion limpiar
function limpiar()
{   
    $("#codigo").val("");
    $("#nombre").val("");
    $("#descripcion").val("");
    $("#stock").val("");
    $("#imagenmuestra").attr("src","");
    $("#imagenactual").val("");
    $("#print").hide();
    $("#idarticulo").val();
}

//Funcion mostrar formulario
function mostrarform(flag)
{
    limpiar();
    if(flag)
    {
        $("#listadoregistros").hide();
        $("#formularioregistros").show();
        $("#btnGuardar").prop("disabled", false);
        $("#btnagregar").hide();
    }
    else
    {   
        $("#listadoregistros").show();
        $("#formularioregistros").hide();
        $("#btnagregar").show();
    }

}

//Cancelar formulario
function cancelarform()
{
    limpiar();
    mostrarform(false);
}

function mostrar(idarticulo)
{
    $.post("../ajax/articulo.php?op=mostrar",{idarticulo : idarticulo}, function(data, status)
    {
        data = JSON.parse(data);
        mostrarform(true);

        $("#idcategoria").val(data.idcategoria);
        $('#idcategoria').selectpicker('refresh');
        $("#codigo").val(data.codigo);
        $("#nombre").val(data.nombre);
        $("#stock").val(data.stock);
        $("#nombre").val(data.nombre);
        $("#descripcion").val(data.descripcion);
        $("#imagenmuestra").show();
        $("#imagenmuestra").attr("src","../files/articulos/"+data.imagen);
        $("#imagenactual").val(data.imagen);
        $("#idarticulo").val(data.idarticulo);
        generarbarcode();
    })
}

function readURL(input)
{
    if (input.files && input.files[0])
    {
        var reader = new FileReader();
        reader.onload = function(e){
            $('#imagen').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imagenmuestra").change(function() {
  readURL(this);
});

<label>Imagen:</label>
<input type="file" class="form-control" name="imagen" id="imagen" maxlength="256" placeholder="Imagen">
<input type="hidden" class="form-control" name="imagenactual" id="imagenactual">
<img src="" width="150px" height="120px" id="imagenmuestra">

jquery html

asked by Anderviver 13.04.2018 в 17:31

source

2 answers

0

Here is the solution, remember that in link it is not allowed to pre-visualize local content on line, you will have to try the separate code.

What I have done is that when we select a file, an event is executed that picks up the path and inserts it into the src of the image.

$(document).ready(function (){
  $("#imagen").change(function (){
    $("img").attr('src',$("#imagen").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Imagen:</label>
<input type="file" class="form-control" name="imagen" id="imagen" maxlength="256" placeholder="Imagen">
<input type="hidden" class="form-control" name="imagenactual" id="imagenactual">
<img src="http://php.net/images/logos/php-logo.svg" width="150px" height="120px" id="imagenmuestra">

answered by 13.04.2018 в 20:57

How do I update records in the database? Xamarin Android - Get GPS date

score 1 · Accepted Answer

Your ids are wrong, you are assigning a listener to #imagenmuestra when it should be #imagen , and you want to assign the src to input instead of the img tag.

Your code with the corrections:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      // Asignamos el atributo src a la tag de imagen
      $('#imagenmuestra').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

// El listener va asignado al input
$("#imagen").change(function() {
  readURL(this);
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<label>Imagen:</label>
<input type="file" class="form-control" name="imagen" id="imagen" maxlength="256" placeholder="Imagen">
<input type="hidden" class="form-control" name="imagenactual" id="imagenactual">
<img src="" width="150px" height="120px" id="imagenmuestra">