#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