Я отправляю форму с использованием php и jquery ajax с использованием formdata, но часть url, похоже, не работает

#php #jquery #ajax #form-data

#php #jquery #ajax #форма-данные

Вопрос:

Я просто пытаюсь отправить форму с помощью jquery ajax, и для этого я использую FormData, но всякий раз, когда я нажимаю на кнопку отправки, страница перезагружается, не показывая никаких ошибок или каких-либо результатов.

Это имя части формы regpage.php

 <!DOCTYPE html>
<html>
<head>
    <title>reg form</title>

<script
              src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

              <script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>

                <script type="text/javascript" src="script.js"></script>
    <style type="text/css">
        #d1
        {
            width: 400px;
            height: auto;
            border: 1px solid;
            text-align: center;
            margin: 0 auto;
        }
    </style>
    </head>





</head>
<body>
<form id="form"  method="post" enctype="multipart/form-data">
<div id="d1">

<h1>Regestration form</h1>
username:<input type="text" name="uname" id="username" placeholder="username"><br>
password:<input type="password" name="pass" id="password" placeholder="password"><br>
email:<input type="text" name="email" id="email" placeholder="email"><br>
<span>Hobby</span>
<input type="checkbox" name="cric[]"  value="cricket">Cricket
<input type="checkbox" name="cric[]"  value="kite">Kite
<input type="checkbox" name="cric[]"  value="zym">ZYM<br>

<h2>Gender</h2>
<input type="radio" name="chack" id="d3" value="male">male
<input type="radio" name="chack" id="d3" value="female">female<br>
<input type="file" name="image" action="image/*" ><br>
<input type="submit" name="sub" value="sign up"   ><br>

</div>
</form>
<div id="output" ></div>
<script >
$(document).ready(function (e) {
    $("#form").on('submit',(function(e) {

        e.preventDefault();
        $.ajax({

            url: "aform.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend : function()
            {
                //$("#preview").fadeOut();
                $("#output").fadeOut();
            },
            success: function(data)
            {
                if(data=='invalid')
                {
                    // invalid file format.
                    $("#output").html("Invalid File !").fadeIn();
                }
                else
                {
                    // view uploaded file.
                    $("#preview").html(data).fadeIn();
                    $("#form")[0].reset();  
                }
            },
            error: function(e) 
            {
                $("#output").html(e).fadeIn();
            }           
       });
    }));
});

</script>    
</body>
</html> 
  

Теперь вот страница, на которой я пытаюсь отправить форму

     <?php


print_r($_POST);

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory


if(isset($_FILES['image']))
{
extract($_POST);

  $hobby=implode(',','cric');

  $img = $_FILES['iname']['name'];
  $tmp = $_FILES['iname']['tmp_name'];

  // get uploaded file's extension
  $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

  // can upload same image using rand function
  $final_image = rand(1000,1000000).$img;



  // check's valid format
  if(in_array($ext, $valid_extensions)) 
  {         
    $path = $path.strtolower($final_image); 

    if(move_uploaded_file($tmp,$path)) 
    {
      $con=mysqli_connect("localhost","root","","users");

      $qry="insert into abcd(username,password,email,hobby,gender,image)values('$uname','$pass','$email','$hobby','$chack','$image') ";

      mysqli_query($con,$qry);

      //print_r($run);
      echo "<img src='$path' />";
    }
  } 
  else 
  {
    echo 'invalid';
  }
}


?>
  

Что я делаю не так, кто-нибудь может рассказать мне об этом?

Комментарии:

1. есть ли какая-либо ошибка в консоли?

2. Во-первых, вы уязвимы для атак с использованием SQL-инъекций . В течение нескольких секунд у вас практически НЕТ обработки ошибок, и вы просто ПРЕДПОЛАГАЕТЕ, что ничего не может пойти не так. Для третьих, путь, в который вы (пытаетесь?) сохраняете изображение, НЕ будет работать как src для веб-использования.

3. итак, я должен добавить обработку ошибок и удалить из нее загрузку изображения @Marc B?

4. если вам нужно изображение, то какой смысл его удалять? Но начните проверку на сбой. Поскольку вы ПРЕДПОЛАГАЕТЕ, ЧТО все идеально, вы понятия не имеете, действительно ли что-то пошло не так. Никогда не предполагайте успеха при работе с внешними ресурсами. Всегда предполагайте сбой, проверяйте наличие сбоя и относитесь к успеху как к приятному сюрпризу.

5. хорошо, позвольте мне попробовать, добавив обработку ошибок в мой код спасибо за ответ @Marc B