Estoy construyendo una red social básica y en el registro el usuario carga una imagen de visualización. Básicamente, quería mostrar la imagen, como una vista previa en la misma página que el formulario, justo después de que la seleccionen y antes de enviar el formulario.Tipo de entrada HTML = archivo, obtenga la imagen antes de enviar el formulario
¿Esto es posible?
La imagen no se puede mostrar hasta que se publique desde cualquier servidor. por lo que debe cargar la imagen en su servidor para mostrar su vista previa.
Gracias, simple pero exactamente lo que necesitaba :) – Tom
gran explicación –
Esta es una respuesta incorrecta ... aunque aparece en los mejores resultados ... ver otros enlaces en esta discusión o http://stackoverflow.com/questions/14069421/ show-an-image-preview-before-upload –
me siento tuvimos una discusión relacionada anteriormente: How to upload preview image before upload through JavaScript
Ah, buen lugar. Marqué la pregunta como posible duplicado. –
Esto se puede hacer muy fácilmente con HTML 5, véase este enlace http://www.html5rocks.com/en/tutorials/file/dndfiles/
buen archivo de código abierto cargador
Aquí está el ejemplo completo para obtener una vista previa de la imagen antes de que se cargue.
HTML:
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://goo.gl/r57ze"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>
JavaScript:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
¿por qué ofuscar las URL? – goat
no renderizará las URL, pero muestra las imágenes directamente desde el almacenamiento local usando la imagen incrustada en el texto ... simplemente pruebe este código y luego commnet –
lo entiende mal. la pregunta era ¿por qué usaste un acortador de URL (goo.gl)? oculta/ofusca las URL – goat
encontré este simpler yet powerful tutorial que utiliza el fileReader objeto. Simplemente crea un elemento img y, utilizando el objeto FileReader, asigna el atributo de origen como el valor de la entrada de un formulario
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function() {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function() {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">¿podría agregar algunas explicaciones? Gracias – Allan
posible duplicado de [Cómo cargar la imagen de vista previa antes de cargarla a través de JavaScript] (http://stackoverflow.com/questions/4094012/how-to-upload-preview-image-before-upload-through-javascript) –