Subir img sin utilizar el botón de envío o rederict en PHP y AJAX

Esto podría verse como un duplicado, pero no he encontrado algo que coincide con mis necesidades exactamente todavía. Quiero subir una Imagen a una carpeta simplemente eligiendo un archivo en el explorador de archivos, no hay botón de enviar utilizado (tan lejos y tan bien, que puedo hacer esto). Pero luego quiero que el usuario no será redirigido a la a upload.php archivo. Así que tengo que enviar un archivo sin usar el botón de enviar y no redirigir al usuario a otra página. Una actualización es aceptable, pero preferible sin actualizar así.. Esto es lo que tengo ahora mismo, y mi pregunta es si esto se podría hacer en PHP,AJAX & Javascript o si debo ir para un JQuery plugin?

Y voy a tener varias formas, así que no estoy usando ID-tag

Mi código hasta el momento no funciona al 100%, solo cuando puedo subir y redirigir a upload.php :

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" class="test">
</form>

    $(".test").change(function() { 
        $.ajax({
            url: "upload.php",
            type: "post",
            dataType: 'json',
            processData: false,
            contentType: false,
            data('file', $(this[0].files[0])),
            success: function(text) {
                    alert("successfully");
            }
        });   
    });

UPLOAD.PHP

<?php if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "uploads/myfile.jpg")) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
 } else {
    echo "Sorry, there was an error uploading your file.";
     }
 }?>

2 Respuestas

  • Almis
    15 de junio de 2015

    Le sugiero que use jQuery-Carga de Archivos , ya que se encarga de las versiones de los navegadores y los sistemas operativos de los problemas de compatibilidad. Si usted no necesita nada avanzado leer esta documentación

    Código desde el enlace de arriba

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

    Editado base en OP comentario:

    $(function () {
    $('.fileuploads').each(function(i, obj){
        $(obj).fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });
});
  • Sawan Dhanotiya
    15 de junio de 2015

    Puede utilizar el siguiente método, sin botón y haga clic en actualizar la página de carga de archivos.

    <form id="uploadform" target="upiframe" action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" class="test" onchange="yourFunction()">
</form>

<iframe id="upiframe" name="upiframe" witdh="0px" height="0px" border="0" style="width:0; height:0; border:none;"></iframe>


function yourFunction() {
    var form = document.getElementById('uploadform');
    form.submit();
  });
}