Necesito subir una imagen (jpg||png||jpeg) al servidor que creé con el nodo js.

Tengo el enrutador y los requestHandlers... que redirigen a esta función:

 function reqUpload(request, response) { var form = new formidable.IncomingForm(); form.parse(request, function (error, fields, files) { lastFileUploaded=files.up.originalFilename; if (files.up.originalFilename.match(/\.(jpg|jpeg|png)$/i)) { //check if alredy exists fs.access(files.up.originalFilename, fs.F_OK, (err) => { if (err) { fs.rename(files.up.filepath, files.up.originalFilename, function (err) { if (err) { fs.unlink(files.up.originalFilename); fs.rename(files.up.filepath, files.up.originalFilename); } var data; fs.readFile('./html/std.html', 'utf8', function (err, data) { if (err) { console.error(err); return } response.writeHead(200, { "Content-Type": "text/html" }); response.write(data); response.end(); }); }) }else{ console.log("Already exists, replacing it!"); fs.rename(files.up.filepath, files.up.originalFilename, function (err) { if (err) { fs.unlink(files.up.originalFilename); fs.rename(files.up.filepath, files.up.originalFilename); } })} }); } else { console.log("format not accepted! try again."); }

Esto funciona si cargo mi archivo a través de un botón y la acción de formulario ="/reqUpload", sin embargo, necesito cargarlo en la misma página.

¿Cómo lo hago con ajax + jquery?

Necesito mostrar la imagen cargada en la misma página que la cargué, sin actualizar la página.

tengo esta funcion:

 function loadPhoto(e){ alert("entered") var xhr = new XMLHttpRequest(); xhr.open('POST', '/reqUpload'); xhr.onload = function(){ xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); alert(this.responseText) document.getElementById('#photo').innerHTML = this.responseText; } xhr.send('/html/std.html'); e.preventDefault();

}

pero se rompe y devuelve esto: ingrese la descripción de la imagen aquí

parece no enviar el archivo en el formato correcto, o algo así