3

Estoy enviando a mi web server una imagen que selecciono desde mi HTML de la siguiente manera:

<form method="POST" action="http://'+ip+'/HelloSpringMVC/uploadFile" action="subirFoto();" enctype="multipart/form-data">
   File to upload: <input type="file" name="file"><br/>
   <input type="submit" value="Upload"> Press here to upload the file!
</form>

Mi problema es que haciendo esto ademas de hacer el POST con la imagen a mi web server me redirige la página a esa dirección cosa que no quiero que ocurra, quiero que se mantenga en el HTML en el que está, ¿ cómo podría solucionarlo?

También me gustaría conocer si esto puede realizarse en Javascript

1
  • 2
    Para poder ayudarte debes colocar también el código javascript el 14 may. 2018 a las 18:56

3 respuestas 3

3

Use formData para cargar archivo.

HTML:

<input type="file" id="filechooser">

Javascript:

function uploadFile() {
    var blobFile = $('#filechooser').files[0];
    var formData = new FormData();
    formData.append("fileToUpload", blobFile);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: formData,
       processData: false,
       contentType: false,
       success: function(response) {
           // .. hacer algo...
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Opcional
       }
    });
}

Vea la compatibilidad con los navegadores: http://caniuse.com/xhr2

Fuente SO:

Otro ejemplo lo encuentra aquí:


Otro Ejemplo:

function mostrar(){
  var archivo = document.getElementById("file").files[0];
  var reader = new FileReader();
  if (file) {
    reader.readAsDataURL(archivo );
    reader.onloadend = function () {
      document.getElementById("img").src = reader.result;
    }
  }
}
<input type="file" id="file" accept="image/*" onchange="mostrar()"/>
<br>
<img id="img"/>

3
  • A ese HTML le he añadido un onchange=uploadFile(); para invocar la función, pero tengo problemas con var blobFile = $('#filechooser').files[0]; ya que no es capaz de recoger el valor del filechooser
    – Silvia
    el 15 may. 2018 a las 17:29
  • @Silvia prueve asi: var blobFile = document.getElementById("filechooser").files[0]; el 15 may. 2018 a las 18:00
  • @Silvia he colocado otro código de ejemplo pruebe! el 15 may. 2018 a las 18:07
0

OK primero tienes que usar un evento en ajax para guardar la imagen y no te rediccione la pagina y usar un evento file upload de jquery para subir la imagen, en mi caso yo utilizo fileupload de jquery aqui esta la informacion

aqui tienes la vista

 <form method="POST" action="" enctype="multipart/form-data">
            File to upload: <input type="file" name="file"><br/>
            <input type="button" id="button" value="Upload"> Press here to upload the file!
        </form>

al input del submit lo cambiamos a button

y el jquery es 

$("#button").on("click",function(){
        var url = window.location.hostname === 'url';
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
            }

        })
    });  

de igual manera aqui te dejo el link del fileupload http://blueimp.github.io/jQuery-File-Upload/index.html

0
var formulario = $('#subirFoto'); //Donde el el selector subirFoto debe estar dentro de la etiqueta form como id es decir <form id="subirFoto" enctype="multipart/form-data">

formulario.submit(function( event ) {
event.preventDefault();
$data = $formulario.serialize();

    $.ajax({
        beforeSend: function () {
              //que quieres hacer antes de enviar la información
        }
        type: 'POST',
        url: 'subirFoto.php',//Ruta donde va a ser enviado el formulario
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {

               //Response devuelve una respuesta del archivo subirFoto.php
               //Puede ser un json que es lo mas común utilizar en estos casos
        },
        error: function (response) {
               //En caso de que suceda algún error con el envío de información
        }
    });
});
2
  • Estoy probando la manera que me comentó y no entiendo muy bien, he dejado el form así: <form id="subirFoto();" enctype="multipart/form-data"> File to upload: <input type="file" name="file"><br/> <input type="button" id="button" value="Upload"> Press here to upload the file! </form> El código Javascript debe ir en una funcion llamada subirFoto() o no haría falta, gracias
    – Silvia
    el 15 may. 2018 a las 15:09
  • El subirFoto no es una función simplemente es un identificador que en jquery va a funcionar como selector es decir tu codigo html quedaría así <form id="subirFoto" enctype="multipart/form-data"> y tu selector de jquery es el siguiente: $('#subirFoto');, aclaro para hacer todo eso debes importar jquery en tu proyecto el 16 may. 2018 a las 16:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.