javascript - seleccionada - Vista previa de una imagen antes de subirla

vista previa imagen html

Question

Quiero poder obtener una vista previa de un archivo (imagen) antes de que se cargue. La acción de vista previa debe ejecutarse en el navegador sin utilizar Ajax para cargar la imagen.

¿Cómo puedo hacer esto?

Answer 1

¿Qué hay de crear una función que carga el archivo y dispara un evento personalizado? Luego adjunte un oyente a la entrada. De esta manera tenemos más flexibilidad para usar el archivo, no solo para previsualizar imágenes.

/**
* @param {domElement} input - The input element
* @param {string} typeData - The type of data to be return in the event object.
*/
function loadFileFromInput(input,typeData) {
var reader,
fileLoadedEvent,
files = input.files;
if (files && files[0]) {
reader = new FileReader();
reader.onload = function (e) {
fileLoadedEvent = new CustomEvent(''fileLoaded'',{
detail:{
data:reader.result,
file:files[0]
},
bubbles:true,
cancelable:true
});
input.dispatchEvent(fileLoadedEvent);
}
switch(typeData) {
case ''arraybuffer'':
reader.readAsArrayBuffer(files[0]);
break;
case ''dataurl'':
reader.readAsDataURL(files[0]);
break;
case ''binarystring'':
reader.readAsBinaryString(files[0]);
break;
case ''text'':
reader.readAsText(files[0]);
break;
}
}
}
function fileHandler (e) {
var data = e.detail.data,
fileInfo = e.detail.file;
img.src = data;
}
var input = document.getElementById(''inputId''),
img = document.getElementById(''imgId'');
input.onchange = function (e) {
loadFileFromInput(e.target,''dataurl'');
};
input.addEventListener(''fileLoaded'',fileHandler)

Probablemente mi código no sea tan bueno como algunos usuarios, pero creo que obtendrás el punto. Aquí puedes ver un example

Answer 2

¿Qué pasa con esta solución?

Simplemente agregue el atributo de datos "tipo de datos = editable" a una etiqueta de imagen como esta:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

Y el guión a tu proyecto fuera de curso ...

function init() {
$("img[data-type=editable]").each(function (i, e) {
var _inputFile = $(''<input/>'')
.attr(''type'', ''file'')
.attr(''hidden'', ''hidden'')
.attr(''onchange'', ''readImage()'')
.attr(''data-image-placeholder'', e.id);
$(e.parentElement).append(_inputFile);
$(e).on("click", _inputFile, triggerClick);
});
}
function triggerClick(e) {
e.data.click();
}
Element.prototype.readImage = function () {
var _inputFile = this;
if (_inputFile && _inputFile.files && _inputFile.files[0]) {
var _fileReader = new FileReader();
_fileReader.onload = function (e) {
var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
var _img = $("#" + _imagePlaceholder);
_img.attr("src", e.target.result);
};
_fileReader.readAsDataURL(_inputFile.files[0]);
}
};
//
// IIFE - Immediately Invoked Function Expression
// https://.com/questions/18307078/jquery-best-practises-in-case-of-document-ready
(
function (yourcode) {
"use strict";
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(
function ($, window, document) {
"use strict";
// The $ is now locally scoped
$(function () {
// The DOM is ready!
init();
});
// The rest of your code goes here!
}));

Ver demo en JSFiddle

Answer 3

A continuación se muestra el código de trabajo.

<input type=''file'' onchange="readURL(this);" />
<img id="ShowImage" src="#" />

Javascript:

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

Answer 4

Aquí hay una versión de múltiples archivos , basada en la respuesta de Ivan Baev.

El HTML

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

JavaScript / jQuery

$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML(''<img>'')).attr(''src'', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$(''#gallery-photo-add'').on(''change'', function() {
imagesPreview(this, ''div.gallery'');
});
});

Requiere jQuery 1.8 debido al uso de $ .parseHTML, que debería ayudar con la mitigación de XSS.

Esto funcionará fuera de la caja, y la única dependencia que necesita es jQuery.

Answer 5

Ejemplo con múltiples imágenes usando JavaScript (jQuery) y HTML5

JavaScript (jQuery)

function readURL(input) {
for(var i =0; i< input.files.length; i++){
if (input.files[i]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $(''<img id="dynamic">'');
img.attr(''src'', e.target.result);
img.appendTo(''#form1'');
}
reader.readAsDataURL(input.files[i]);
}
}
}
$("#imgUpload").change(function(){
readURL(this);
});
}

Marcado (HTML)

<form id="form1" runat="server">
<input type="file" id="imgUpload" multiple/>
</form>

Answer 6

Es mi código. Admite IE [6-9] 、 chrome 17 + 、 firefox 、 Opera 11 + 、 Maxthon3

HTML

<input type="file" id="netBarBig" onchange="changeFile(this)" />
<img src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>

javascript:

<script>
function previewImage(fileObj, imgPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //allowed to upload file type
document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
};
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("don''t support Safari6.0 below broswer");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else {//ie[7-9]
fileObj.select();
fileObj.blur();
var newPreview = document.getElementById(imgPreviewId);
newPreview.style.border = "solid 1px #eeeeee";
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=''scale'',src=''" + document.selection.createRange().text + "'')";
newPreview.style.display = "block";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox//([/d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7 below
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+ 
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("only support" + allowExtention + "suffix");
fileObj.value = ""; //clear Selected file
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
}
}
function changeFile(elem) {
//file object , preview img tag id
previewImage(elem,''imagePreview'')
}
</script>

Answer 7

Hay un par de maneras en que puedes hacer esto. La forma más eficiente sería usar URL.createObjectURL() en el File desde su <input> . Pase esta URL a img.src para indicar al navegador que cargue la imagen proporcionada.

Aquí hay un ejemplo:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
var loadFile = function(event) {
var output = document.getElementById(''output'');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>

También puede usar FileReader.readAsDataURL() para analizar el archivo desde su <input>. Esto creará una cadena en la memoria que contiene una representación base64 de la imagen.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById(''output'');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>

Answer 8

He creado un complemento que puede generar el efecto de vista previa en IE 7+ gracias a Internet, pero tiene pocas limitaciones. Lo puse en una página de github para que sea más fácil conseguirlo

$(function () {
$("input[name=file1]").previewimage({
div: ".preview",
imgwidth: 180,
imgheight: 120
});
$("input[name=file2]").previewimage({
div: ".preview2",
imgwidth: 90,
imgheight: 90
});
});

.preview > div {
display: inline-block;
text-align:center;
}
.preview2 > div {
display: inline-block;
text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script>
Preview
<div class="preview"></div>
Preview2
<div class="preview2"></div>
<form action="#" method="POST" enctype="multipart/form-data">
<input type="file" name="file1">
<input type="file" name="file2">
<input type="submit">
</form>

Answer 9

He editado la respuesta de @ Ivan para mostrar la imagen "No hay vista previa disponible", si no es una imagen:

function readURL(input) {
var url = input.value;
var ext = url.substring(url.lastIndexOf(''.'') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
var reader = new FileReader();
reader.onload = function (e) {
$(''.imagepreview'').attr(''src'', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}else{
$(''.imagepreview'').attr(''src'', ''/assets/no_preview.png'');
}
}

Answer 10

La respuesta de LeassTaTT funciona bien en navegadores "estándar" como FF y Chrome. La solución para IE existe, pero se ve diferente. Aquí descripción de la solución de navegador cruzado:

En HTML necesitamos dos elementos de vista previa, img para navegadores estándar y div para IE

HTML:

<img id="preview"
src=""
alt=""
style="display:none; max-width: 160px; max-height: 120px; border: none;"/>
<div id="preview_ie"></div>

En CSS especificamos lo siguiente específico de IE:

CSS:

#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}

En HTML incluimos el estándar y los Javascripts específicos de IE:

<script type="text/javascript">
{% include "pic_preview.js" %}
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
{% include "pic_preview_ie.js" %}
</script>

El pic_preview.js es el Javascript de la respuesta de LeassTaTT. Reemplace el $(''#blah'') con el $(''#preview'') y agregue el $(''#preview'').show()

Ahora el Javascript específico de IE (pic_preview_ie.js):

function readURL (imgFile) {
var newPreview = document.getElementById(''preview_ie'');
newPreview.filters.item(''DXImageTransform.Microsoft.AlphaImageLoader'').src = imgFile.value;
newPreview.style.width = ''160px'';
newPreview.style.height = ''120px'';
}

Esto es. Funciona en IE7, IE8, FF y Chrome. Por favor, prueba en IE9 y el informe. La idea de la vista previa de IE se encontró aquí: http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

Answer 11

Para carga de imágenes múltiples (Modificación de la solución de @ IvanBaev)

function readURL(input) {
if (input.files && input.files[0]) {
var i;
for (i = 0; i < input.files.length; ++i) {
var reader = new FileReader();
reader.onload = function (e) {
$(''#form1'').append(''<img src="''+e.target.result+''">'');
}
reader.readAsDataURL(input.files[i]);
}
}
}

http://jsfiddle.net/LvsYc/12330/

Espero que esto ayude a alguien.

Answer 12

Por favor, eche un vistazo al código de muestra a continuación:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type=''file'' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>

Además, puedes probar esta muestra aquí .

Answer 13

Prueba esto

window.onload = function() {
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("uploadImage");
filesInput.addEventListener("change", function(event) {
var files = event.target.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match(''image''))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class=''thumbnail'' src=''" + picFile.result + "''" +
"title=''" + picFile.name + "''/>";
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
});
}
}

<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/>
<div id="result" class="uploadPreview">

Answer 14

Sí. Es posible.

Html

<input type="file" accept="image/*" onchange="showMyImage(this)" />
<br/>
<img id="thumbnil" style="width:20%; margin-top:10px;" src="" alt="image"/>

JS

 function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}

Puedes obtener la demostración en vivo desde aquí.

Answer 15

Solución de una sola línea:

El siguiente código utiliza URL de objeto, que es mucho más eficiente que la URL de datos para ver imágenes grandes (una URL de datos es una cadena enorme que contiene todos los datos del archivo, mientras que una URL de objeto es solo una cadena corta que hace referencia a la información del archivo). memoria):

<img id="blah" alt="your image" width="100" height="100" />
<input type="file"
onchange="document.getElementById(''blah'').src = window.URL.createObjectURL(this.files[0])">

La URL generada será como:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

Answer 16

para mi aplicación, con parámetros de GET url cifrados, solo esto funcionó. Siempre tengo un TypeError: $(...) is null . Tomado de developer.mozilla.org/en-US/docs/Web/API/FileReader/…

function previewFile() {
var preview = document.querySelector(''img'');
var file = document.querySelector(''input[type=file]'').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Answer 17

JSfiddle limpio y simple

Esto será útil cuando desee que el evento se dispare indirectamente desde un botón o div.

<img id="image-preview" style="height:100px; width:100px;" src="" >
<input style="display:none" id="input-image-hidden" onchange="document.getElementById(''image-preview'').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">
<button onclick="HandleBrowseClick(''input-image-hidden'');" >UPLOAD IMAGE</button>
<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
var fileinputElement = document.getElementById(hidden_input_image);
fileinputElement.click();
}
</script>

Answer 18

function assignFilePreviews() {
$(''input[data-previewable=/"true/"]'').change(function() {
var prvCnt = $(this).attr(''data-preview-container'');
if (prvCnt) {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var img = $(''<img>'');
img.attr(''src'', e.target.result);
img.error(function() {
$(prvCnt).html('''');
});
$(prvCnt).html('''');
img.appendTo(prvCnt);
}
reader.readAsDataURL(this.files[0]);
}
}
});
}
$(document).ready(function() {
assignFilePreviews();
});

HTML

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" />
<div class = "prd-img-prv"></div>

Esto también controla el caso cuando se selecciona un archivo con un tipo no válido (por ejemplo, pdf)