Can I upload files using php and ajax?

2
  


Notice : Undefined index: photoProfile in C: \ xampp \ htdocs \ web \ profile.php on line 8 < br>

When trying to upload a file using ajax I get that error and it does not upload the file, but trying to do it without ajax, and if it works correctly, I could indicate if it would be possible to do this with ajax.

var form = $('#form'),
        data = form.serialize(),
        url = 'backend/profile.php';

    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        dataType: 'json',
        success: function () {
            console.log("Exito");
        },
        error: function (e) {
            console.log(e);
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The form is as follows:

 <form id="form" enctype="multipart/form-data" >
                            <table class="highlight">
                                <tbody>
                                    <tr>
                                        <td>Email:</td>
                                        <td>
                                            <input id="inputEmail" type="text" name="email" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Foto de perfil</td>
                                        <td>
                                            <div class="file-field input-field">
                                                <div class="btn">
                                                    <span>Imagen</span>
                                                    <input type="file" id="inputProfile" name="photoProfile">
                                                </div>
                                                <div class="file-path-wrapper">
                                                    <input class="file-path validate" type="text">
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Foto de portada</td>
                                        <td>
                                            <div class="file-field input-field">
                                                <div class="btn">
                                                    <span>Imagen</span>
                                                    <input type="file" id="inputFront" name="photoFront">
                                                </div>
                                                <div class="file-path-wrapper">
                                                    <input class="file-path validate" type="text">
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div id="error" class="center"></div>
                            <div class="row center">
                                <button id="submit" type="button" class="btn waves-effect waves-light">Guardar datos</button>
                            </div>
                        </form>

The php:

<?php
session_start();
require 'class/functions.php';
require 'class/users.php';

$user = $_SESSION['user'];
$email = $_POST['email'];
$phProfile = $_FILES['photoProfile'];
$phFront = $_FILES['photoFront'];
user::changProfile($user,$phProfile);

?>

//Función para subir la imagen

function changProfile($user,$photo){
    $route = "../accounts/$user/profile/";
    $namePhoto = $photo['name'];
    $nameTemp = $photo['tmp_name'];
    $namePhoto = $photo['name'];
    $upload = "$route/profile.jpg";
    return $result = move_uploaded_file($nameTemp,$upload);
}
    
asked by Camilo 18.03.2018 в 01:19
source

1 answer

1

Of course, yes, I think your code would look like this:

$("#form").bind("submit", function() {
    var data = new FormData(this);

    $.ajax({
        type: 'POST',
        url: 'backend/profile.php',
        data: data,
        contentType: false,
        processData: false,

        success: function() {
            console.log("Exito");
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false;
});

Verify and tell us, greetings!

    
answered by 18.03.2018 в 01:25