Javascript 使用formData通过ajax将图像插入数据库
我在从html表单上传图像时遇到了一些困难。表单应该能够将图像名称和其他数据发送到php页面 我使用formData而不是序列化函数,因为它不能处理文件数据Javascript 使用formData通过ajax将图像插入数据库,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我在从html表单上传图像时遇到了一些困难。表单应该能够将图像名称和其他数据发送到php页面 我使用formData而不是序列化函数,因为它不能处理文件数据 $(document).on('click', '#btn_add', function(){ var formData = new FormData($(this)[0]); $.ajax({ url:"includes/widgets/insert.php", type: 'POST',
$(document).on('click', '#btn_add', function(){
var formData = new FormData($(this)[0]);
$.ajax({
url:"includes/widgets/insert.php",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false
success: function (data) {
alert(data);
},
});
return false;
});
html表单
<form id="insert_post" action="includes/widgets/insert.php" method="post" enctype="multipart/form-data" >
<div class="row">
<div class="medium-6 columns">
<label>First name
<input type="text" name="first_name" id="first_name" contenteditable>
</label>
</div>
<div class="medium-6 columns">
<label>Last name
<input type="text" name="last_name" id="last_name" contenteditable>
</label>
</div>
<div class="medium-12 columns">
<label>Last name
<input type="file" name="file" id="image" multiple contenteditable>
</label>
</div>
</div>
<button type="button" name="btn_add" id="btn_add" class="button btn btn-xs btn-success" >Submit</button>
</form>
php page
<?php
$connect = mysqli_connect("localhost", "root", "", "myaddboard");
echo $_POST['first_name'];
echo $_POST['last_name'];
echo $image = $_FILES['file']['name'];
echo $image_tmp = $_FILES['file']['tmp_name'];
/*
if(empty($image)){
echo 'error';
}
move_uploaded_file($image_tmp,"img/$image");
//$sql = "INSERT INTO posts(post_content, post_author) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
} else {
echo 'error';
}
*/
?>
我应该怎么做才能让ajax将数据发送到php页面?这将不起作用,因为选择器是如何创建的
$(document).on('click', '#btn_add', function(){
var formData = new FormData($(this)[0]);
在上面的场景中,$(此)[0]
将为您提供按钮的原始HTML解释
实际上,您需要将按钮更改为提交
类型,捕获表单提交事件
,然后处理您的请求
button type="submit" <-- change
$(document).on('submit', '#insert_post', function(e){
e.preventDefault(); //stop default form submission
//do the rest of your stuff here
});
button type=“submit”这将不起作用,因为选择器是如何创建的
$(document).on('click', '#btn_add', function(){
var formData = new FormData($(this)[0]);
在上面的场景中,$(此)[0]
将为您提供按钮的原始HTML解释
实际上,您需要将按钮更改为提交
类型,捕获表单提交事件
,然后处理您的请求
button type="submit" <-- change
$(document).on('submit', '#insert_post', function(e){
e.preventDefault(); //stop default form submission
//do the rest of your stuff here
});
button type=“submit”错误是什么。。请发布更新的问题。谢谢你错在哪里。。请发布更新的问题。谢谢,它很有魅力,非常感谢。上次我尝试提交类型时,它总是将我指向操作页面,所以我使用了按钮。但它现在应该能正常工作了。再次感谢。嗯,它很有魅力。非常感谢。上次我尝试提交类型时,它总是将我指向操作页面,所以我使用了按钮。但它现在应该能正常工作了。再次感谢。