Problem with POST ajax method with jqery and php

Question

Problem with POST ajax method with jqery and php

Navigation

#1 by (1 votes)

0

How about, I'm starting with ajax and even though I've searched, I can not find the error, I want to post a picture but it does not work, could you help me? I leave the code, thank you already.

I think the error is in the ajax part, but it does not work for me.

index.html

   <!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-3.2.1.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
        <script src="js/mijs.js"></script>
        <title>inicio</title>
    </head>
    <body>
        <div class="row">
            <div class="col-sm-4"> </div>
            <div class="col-sm-4">
                <div class="jumbotron">
                    <form id="frm" enctype="multipart/form-data">
                         <div class="form-group">
                             <input type="text" class="form-control" placeholder="Nombre" id="nombre" name="nombre">
                        </div>
                        <div class="form-group">
                            <label class="btn btn-primary" for="my-file-selector">
                                <input id="my-file-selector" type="file" style="display:none" name="img"
                                onchange="$('#upload-file-info').html(this.files[0].name)">
                                Subir archivo
                            </label>
                            <span class='label label-info' id="upload-file-info"></span>
                        </div>
                        <div class="form-group">
                            <input id="guardar" type="submit" value="ENVIAR" class="btn btn-primary">
                        </div>
                    </form>
                </div>
            </div>
            <div id="resp" class="col-sm-4">Hola </div>
        </div>
        <script>
            $(document).ready(function(){
               $("#guardar").click(function(){
                    $.ajax({
                        url:'mandar.php',
                        type:'POST',
                        data:$('#frm').serialize()
                        ,success:function(){
                            alert('OK');
                        }
                    });
                });
            });
        </script>
    </body>
</html>

mandar.php

<?php
    $nombre = $_POST['nombre'];
    $img = $_FILES['img']['name'];
    $ruta = $_FILES['img']['tmp_name'];
    $destino = "fotos/".$img;
    if($_FILES['img']['size'] > 500000){
        echo 'El archivo es muy grande!!';
        die('sube un archivo más pequeño');
    }
    copy($ruta, $destino);
    include './db_const.php';

    $con = new mysqli($host, $username, $passwd, $dbname);
    if(!$con){
        echo 'ERROR DE CONEXION',$con->connect_errno;
        die('ERROR');
    }
    $qy = "insert into alumnos (nombre,imagen) values('{$nombre}','{$destino}');";
    if($con->query($qy)){
        echo 'Todo bien';
    }
    else{
        echo 'ERROR';
    }

jquery php ajax post

asked by Eduardo Valdez 13.10.2017 в 18:14

source

1 answer

How can I get the data type of a "null" nil attribute in swift 3? Random Forest in R

score 1 · Accepted Answer

Modify your script as follows

<script>
  $(document).ready(function(){
    $("#guardar").submit(function(e){
       e.preventDefault();
       let formData = new FormData(this);
       $.ajax({
         url:'mandar.php',
         type:'POST',
         data: formData,,
         async: false,
         success:function(){
           alert('OK');
         }
       });
    });
 });
</script>

And in your HTML, this changes:

<input id="guardar" type="submit" value="ENVIAR" class="btn btn-primary">

Because of this:

<button id="guardar" type="submit" class="btn btn-primary">Enviar</button>

And on your label <form> of HTML add the attribute method="post"

The object FormData allows you to send data through AJAX / XMLHttpRequest, it is mainly used for sending data of the form and also allows you to send files. You can check more information here .