0

This is my code, but unfortunately the file does not uploads to my server. I receive no error message, is just the fact that after I clikc the button, nothing happens and the $_FILES seems to be empty.

My PHP document momentarily only has a var_dump ($_FILES); but as mentioned, nothing is uploaded. Could you please help me find out why? This is a actually code that my teacher gave me and not even him could find the problem on it. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subida de Archivos</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <form enctype="multipart/form-data">
        <div class="container">
            <h3 class="h3">Formulario de subida de archivos</h3>
            <div class="row">
                <div class="form-column col-md-4 col-sm-4 col-xs-4">
                    <div class="form-group required">
                        <label for="archivo" class="control-label">Seleccione un archivo</label>
                        <input type="file" class="form-control" id="archivo" name="archivo">
                    </div>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-2"></div>
                <div class="clearfix"></div>
                <div class="form-column col-md-4 col-sm-4 col-xs-4">
                    <div class="from-group required">
                        <button type="button" class="btn btn-success" name="uploadFile" id="uploadFile">Subir Archivo</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function()
        {
            $('#archivo').on('change', function()
                {
                    var size = this.files[0].size;
                    var mb = (size/1024)/1024;
                    if(mb>9)
                    {
                        alert("El archivo super los 9MB de límite, peso: "+mb+"MB");
                        $("#archivo").val('');
                    }else{
                        alert("Peso en "+mb+" MB");
                    }
                }
            );

            $(document).on("click", "#uploadFile", function()
                {
                    var formData = new FormData();
                    var file = $("#archivo").prop('files')[0];
                    console.log(file);
                    formData.append('archivo',file);
                    $.ajax
                    (
                        {
                            type: 'POST',
                            cache: false, 
                            contentType: false, 
                            processData: false,

                            data: formData,
                            url: 'server.php'
                        }
                    ).done(function(data)
                        {
                            alert("Todo bien");
                        }
                    ).fail(function()
                        {
                            alert("Todo mal");
                        }  
                    );
                }
            );
        }
    );
</script>

</html>
Andrea Castle
  • 3
  • 3
  • There are many examples here on SO of doing this, [here's one](https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload). Comparing the accepted solution there to your code, the only significant difference I see is the way the file is `append`ed. Are you sure using `.prop()` like that works? Have you tried the syntax used in the example I linked? – Don't Panic May 01 '20 at 02:29
  • Does this answer your question? [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) – hoangdv May 01 '20 at 02:30
  • @hoangdv no unfortunately, it does not answer my question since I have a version on Chrome that should work with it. But thanks for your answer. – Andrea Castle May 01 '20 at 15:40

0 Answers0