<input type="file" id="asd"/>

Me gustaría obtener la imagen en base64 una vez que el usuario ha elegido que (antes de enviar el formulario)

Algo como :

$(input).on('change',function(){
  var data = $(this).val().base64file(); //it is not a plugin is just an example
  alert(data);
});

Que he leído acerca de la API de Archivo y otros productos alimenticios, que me gustaría que un simple y cruzada solución de los navegadores (IE6/IE7 excluidos obviamente)

Cualquier ayuda apreciada gracias.

  • Y, ¿qué hizo que usted no entienda sobre el HTML5 Archivo api? ¿Qué intenta? Lo que no funciona?
  • no son totalmente compatibles en realidad caniuse.com/#feat=fileapi tengo un trabajo a su alrededor, especialmente a causa versiones de android están siendo utilizados (versiones antiguas), así como para viejas versiones de iOS, y también me gustaría involucrar a IE9 que todavía se usa mucho 😛
  • una solución, ¿para qué? ¿Qué estás tratando de hacer con el archivo? base64file() – es que un plugin?
  • me gustaría conseguir el base64 archivo una vez que el usuario seleccione el archivo desde su pc, base64file() es solo un ejemplo
  • Así que Si usted necesita para apoyar a los navegadores que no lo soportan, usted tendrá que encontrar otra tecnología que puede leer los archivos. Para aquellos navegadores, usted podría ser pegado de subirlo. Usted sólo puede hacer lo que el navegador le permite hacer.
  • por lo que la API de Archivos realmente la única solución?
  • Tal vez esto le ayudará a: stackoverflow.com/questions/6978156/…
  • sí, exactamente lo que necesito, pero también he encontrado este jsfiddle.net/influenztial/qy7h5 que es extremadamente lo que necesito, pero guarda la imagen en un lienzo quisiera obtener la imagen de la canavas demasiado, en bas64 😛 si me puedes ayudar …
  • Yo estaba solo te digo que si necesita compatibilidad con navegadores que no soportan el api de archivos, usted va a tener que buscar otra solución para ellos. Eso significa que de activeX para internet explorer, tal vez de flash para los dispositivos que admiten que, o la carga de un archivo en el servidor. No hay nada más que pueda leer el archivo en el cliente en JavaScript.
  • sí, y eso fue exactamente mi pregunta, cómo apoyar a todos los navegadores 😀

InformationsquelleAutor bombastic | 2013-07-17

4 Comentarios

  1. 182

    JS:

    function readFile() {
      
      if (this.files && this.files[0]) {
        
        var FR= new FileReader();
        
        FR.addEventListener("load", function(e) {
          document.getElementById("img").src       = e.target.result;
          document.getElementById("b64").innerHTML = e.target.result;
        }); 
        
        FR.readAsDataURL( this.files[0] );
      }
      
    }
    
    document.getElementById("inp").addEventListener("change", readFile);

    HTML:

    <input id="inp" type='file'>
    <p id="b64"></p>
    <img id="img" height="150">

    (P. S: Una codificado en base64 de la imagen (Cadena) 4/3 el tamaño de los datos de la imagen original)

    Marque esta respuesta para subir varias imágenes.

    Soporte de los navegadores: http://caniuse.com/#search=file%20api

    Más info aquí: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

    • sí gracias, así que en realidad puedo ver el lector de Archivos no es totalmente compatible, ¿cómo puedo hacer el mismo apoyo también de los viejos android/iOS dispositivos ?
    • hay otros navegadores? xD
    • Que era realmente bueno el código de la imagen en base64 de conversión.. puedo ser capaz de convertir este de nuevo en la imagen en javascript? He usado base64 codificar decodificar antes, pero no tienen ninguna idea acerca de la imagen de las conversiones..
    • Se puede poner a la derecha en la img src como cadena base64, para obtener los datos de la imagen fuera de ella, el uso de la lona de contexto.
    • He utilizado JS para construir tanto para iOS y android en ambos plataforma se trabajó muy bien. El iOS es normal y en android, yo necesitaba algo de código nativo para obtener el permiso para la galería…
    • Yo no este. Cómo venir. e.target.result; contiene el base64 url. ¿Alguien puede explicar esto. Yo soy un novato en html/javascript
    • este // true así que usted puede utilizar this. Event.target === FR no está garantizada para siempre ceder true ya que estamos en un async de devolución de llamada. He utilizado Event.target porque de esa manera se puede transformar la función anterior en una Flecha Función ('load', e => { y aún obtener el resultado correcto. developer.mozilla.org/en-US/docs/Web/API/Event/target Para el Evento.objetivo en este caso es el FileReader instancia, y una de sus propiedades es la result objeto: developer.mozilla.org/en-US/docs/Web/API/FileReader/result

  2. 34

    Exactamente lo que usted necesita:) Usted puede elegir de devolución de llamada de la versión o de la Promesa de la versión. Tenga en cuenta que las promesas se trabajo en es decir, sólo con la Promesa de polyfil lib.Usted puede poner este código una vez en una página, y esta función aparecerá en todos tus archivos.

    La loadend evento es disparado cuando el progreso se ha detenido en la carga de
    un recurso (por ejemplo, después de «error», «abortar», o «carga» han sido
    enviado)

    De devolución de llamada versión

            File.prototype.convertToBase64 = function(callback){
                    var reader = new FileReader();
                    reader.onloadend = function (e) {
                        callback(e.target.result, e.target.error);
                    };   
                    reader.readAsDataURL(this);
            };
    
            $("#asd").on('change',function(){
              var selectedFile = this.files[0];
              selectedFile.convertToBase64(function(base64){
                   alert(base64);
              }) 
            });

    Promesa versión

    html

Dejar respuesta

Please enter your comment!
Please enter your name here