subir archivo con javascript puro

[andresbetancourt]

buenas tardes amigos,

mi duda es esa, como puedo subir un archivo tipo imagen al servidor, haciendo uso de javascript puro sin usar jquery ni otro plugin.

muchas gracias.

ya se los conceptos de ajax y actualmente envio datos por post y get haciendo uso de javascript a php y luego los almaceno en la base de datos, pero ahora requiero cargar una foto con ajax pero a puro javascript ya que no me gusta usar plugins ni tener dependencias de terceros.

de antemano gracias quedo atento

[ocp001a]

Busca información sobre el objeto FileReader()

Con éste puedes realizar varias cosas, entre ellas conocer el tamaño y el tipo de archivo antes de subirlo.

Sólo ten cuidado al usarlo ya que es asíncrono

[andresbetancourt]

muchas gracias por tu respuesta ocp001a

dejo un enlace por si alguien entra a este hilo y desea obtener información sobre el objeto que mencionas

http://www.html5rocks.com/es/tutorials/file/dndfiles/

[andresbetancourt]

disculpa ocp001a

http://www.cristalab.com/tutoriales/...tml5-c104046l/

filereader según lo que leo, se usa para mostrar la imagen en la interfaz grafica al usuario, para darle la sensación de que se esta subiendo.

pero en realidad quien empaqueta toda la información de la imagen y quien debe ser enviado al servidor donde lo espera un lenguaje (php, java, c#...) para procesar la imagen es formdata

estoy en lo cierto?

[andresbetancourt]

dejo otro enlace que tal vez les interese

https://developer.mozilla.org/es/doc...jetos_FormData

[ocp001a]

Iniciado por andresbetancourt

disculpa ocp001a

filereader según lo que leo, se usa para mostrar la imagen en la interfaz grafica al usuario, para darle la sensación de que se esta subiendo.

No exactamente.

Mediante FileReader es posible mostrar la imagen, pero no es la única finalidad.

Te mostraré una parte de un código que tengo:

Código Javascript:

function subir(){
    var i=document.getElementById('fileUp-input');
 
    if(window.FileReader){
        for(var j=0;j<i.files.length;j++){//como mi input file es múltiple, recorro sus elementos (archivos) que pueden ser varios
            var reader = new FileReader();//instanciamos FileReader
            reader.onloadend = (function(f){//creamos la función que recogerá los datos
                return function(e){
                    var content = e.target.result.split(",",2)[1];//obtenemos el contenido del archivo, estará codificado en Base64
                    enviarArchivo(f.name,content);le paso a una función el nombre del archivo y su contenido. Esta función puede pasar el contenido por ajax u otro medio al servidor
                }
            })(i.files[j]);
            reader.readAsDataURL(i.files[j]);//
        }
    }
}
 

Código HTML:

<input type="file" id="fileUp-input" onchange="subir()" multiple>
 

En realidad este código es sólo una pequeña parte de mi gestor de archivos, que incluye varias validaciones pero para que te des una idea creo que es suficiente.

Como verás dentro de la variable content recoges el contenido del archivo, éste lo puedes enviar directamente a una petición ajax, a un webservice, etc.