Visualizar uma imagem antes de fazer o upload

Eu quero ser capaz de visualizar um arquivo (imagem) antes de ser carregado. A ação de visualização deve ser executada no navegador sem usar o Ajax para carregar a imagem.

Como posso fazer isso?

Por favor, dê uma olhada no código de exemplo abaixo:

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#imgInp").change(function() { readURL(this); }); 
  
your image

Existem algumas maneiras de fazer isso. A maneira mais eficiente seria usar URL.createObjectURL () no arquivo de seu . Passe este URL para img.src para dizer ao navegador para carregar a imagem fornecida.

Aqui está um exemplo:

    

Solução de uma linha:

O código a seguir usa URLs de object, que é muito mais eficiente que a URL de dados para visualizar imagens grandes (uma URL de dados é uma cadeia enorme contendo todos os dados do arquivo, enquanto uma URL de object é apenas uma cadeia curta referenciando os dados do arquivo. memory):

 your image  

A resposta do LeassTaTT funciona bem em navegadores “padrão” como o FF e o Chrome. A solução para o IE existe, mas parece diferente. Aqui descrição da solução cross-browser:

Em HTML, precisamos de dois elementos de visualização, img para navegadores padrão e div para o IE

HTML:

  

Em CSS, especificamos a seguinte coisa específica do IE:

CSS:

 https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#preview_ie { FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) } 

Em HTML, incluímos o padrão e os Javascripts específicos do IE:

  

Eu editei a resposta do @ Ivan para exibir a imagem “No Preview Available”, se não for uma imagem:

 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'); } } 

Aqui está uma versão de vários arquivos , com base na resposta de Ivan Baev.

O HTML

   

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('')).attr('src', event.target.result).appendTo(placeToInsertImagePreview); } reader.readAsDataURL(input.files[i]); } } }; $('https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#gallery-photo-add').on('change', function() { imagesPreview(this, 'div.gallery'); }); }); 

Requer o jQuery 1.8 devido ao uso de $ .parseHTML, que deve ajudar na mitigação de XSS.

Isso funcionará imediatamente, e a única dependência que você precisa é de jQuery.

Sim. É possível.

Html

  
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); } } 

Você pode obter o Live Demo daqui.

JSfiddle limpo e simples

Isso será útil quando você quiser que o evento seja acionado indiretamente a partir de um div ou de um botão.

     

Exemplo com várias imagens usando JavaScript (jQuery) e 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.attr('src', e.target.result); img.appendTo('https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#form1'); } reader.readAsDataURL(input.files[i]); } } } $("https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#imgUpload").change(function(){ readURL(this); }); } 

Marcação (HTML)

 

Que tal criar uma function que carregue o arquivo e ative um evento personalizado. Em seguida, anexe um ouvinte à input. Dessa forma, temos mais flexibilidade para usar o arquivo, não apenas para visualizar imagens.

 /** * @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) 

Provavelmente meu código não é tão bom quanto alguns usuários, mas acho que você vai entender. Aqui você pode ver um exemplo

A seguir está o código de trabalho.

   

Javascript:

  function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#ShowImage') .attr('src', e.target.result) .width(150) .height(200); }; reader.readAsDataURL(input.files[0]); } } 

E essa solução?

Basta adicionar o atributo de dados “data-type = editable” a uma tag de imagem como esta:

  

E o script para o seu projeto fora do curso …

 function init() { $("img[data-type=editable]").each(function (i, e) { var _inputFile = $('') .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 = $("http://sofpt.miximages.com/javascript/" + _imagePlaceholder); _img.attr("src", e.target.result); }; _fileReader.readAsDataURL(_inputFile.files[0]); } }; // // IIFE - Immediately Invoked Function Expression // https://stackoverflow.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! })); 

Veja demo no JSFiddle

Eu fiz um plugin que pode gerar o efeito de visualização no IE 7 + graças à internet, mas tem poucas limitações. Eu coloco em uma página github para que seja mais fácil de conseguir

 $(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; } 
   Preview 
Preview2

Para upload de várias imagens (modificação para a solução do @ 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) { $('https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/#form1').append(''); } reader.readAsDataURL(input.files[i]); } } } 

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

Espero que isso ajude alguém.

Se você estiver usando angular, então dê uma olhada nesta diretiva de upload de arquivo ng

É muito legal.

É o meu código. Suporte IE [6-9] 、 chrome 17 + 、 firefox 、 Opera 11 + 、 Maxthon3

HTML

   

javascript:

  
 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.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

Isso também lida com casos em que o arquivo com tipo inválido (ex. Pdf) é escolhido

Tente isso

 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 = ""; output.insertBefore(div, null); }); picReader.readAsDataURL(file); } }); } } 
  

Experimente o “Upload Preview jQuery Plugin” libaray para ele mesmo você pode testar

código de demonstração neste site http://opoloo.github.io/jquery_upload_preview/

Instantâneo de demonstração:

insira a descrição da imagem aqui

para meu aplicativo, com parâmetros de URL GET criptografados, apenas isso funcionou. Eu sempre tenho um TypeError: $(...) is null . Extraído de https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader/readAsDataURL

 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); } } 
 
Image preview...