read - validar formulario html javascript
Tipo de entrada HTML=archivo, obtenga la imagen antes de enviar el formulario (7)
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]);
}
}
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 que se envíe el formulario.
es posible?
Encontré este tutorial más simple pero potente que utiliza el objeto fileReader . Simplemente crea un elemento img y, utilizando el objeto fileReader, asigna su atributo de origen como el valor de la entrada de 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...">
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.
Siento que tuvimos una discusión relacionada anteriormente: Cómo subir una imagen de vista previa antes de subirla a través de JavaScript
buen cargador de archivos de código abierto
esto se puede hacer muy fácilmente con HTML 5, consulte este enlace http://www.html5rocks.com/en/tutorials/file/dndfiles/
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...">