使用ajax进行文件上传和数据插入
Posted
技术标签:
【中文标题】使用ajax进行文件上传和数据插入【英文标题】：file uploading and data insertion using ajax 【发布时间】：2015-09-15 13:29:31 【问题描述】：我的问题是，当我在没有文件上传的情况下将数据发送到 mysql 数据库时，它已成功插入到数据库中，但是当我使用插入数据和文件上传时它不起作用，并且 post.js 文件没有接收到数据
success:function(data)
alert(data);
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AdPortal</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="nav">
<ul class="nav_link">
<div class="nav_link_div"><a href="http://localhost/adportal/index.html"><li class="nav_link_list">HOME</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">POST AD</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">CONTACT US</li></a></div>
<div class="nav_link_div"><a href="#"><li class="nav_link_list">ABOUT</li></a></div>
</ul>
</div>
<div class="post_table">
<form method="post" enctype="multipart/form-data">
<table>
<tr>
<td>
Ad Title of Post:
</td>
<td>
<input type="text" id="ad_title">
</td>
</tr>
<tr>
<td>
Price:
</td>
<td>
<input type="text" id="price">
</td>
</tr>
<tr>
<td>
Model:
</td>
<td>
<input type="text" id="model">
</td>
</tr>
<!-- <td>
<input type="button" id="upload" value="Upload" />
</td> -->
</tr>
<tr>
<td>
Ad description:
</td>
<td>
<textarea rows="5" cols="21" id="description"></textarea>
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" id="email">
</td>
</tr>
<tr>
<td>
Phone:
</td>
<td>
<input type="text" id="phone">
</td>
</tr>
<tr/>
<td>
City:
</td>
<td>
<input type="text" id="city">
</td>
</tr>
<tr>
<td>Add Image</td>
<td>
<input id="file" type="file" />
</td>
<tr>
<td></td>
<td>
<button type="submit" id="ad_btn">Submit Post</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/post.js"></script>
</body>
</html>
post.js
$(document).ready(function()
$("#ad_btn").on('click', function()
var title = $("#ad_title").val();
var price = $("#price").val();
var model = $("#model").val();
var description = $("#description").val();
var name = $("#name").val();
var email = $("#email").val();
var phone= $("#phone").val();
var city= $("#city").val();
var file_data = $('#file').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax(
url:'php/post.php',
type:'POST',
data:form_data,
success:function(data)
alert(data);
);
);
);
post.php
<?php
require_once 'database.php';
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
if (0 < $_FILES['file']['error'])
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
else
echo "done";
$id = NULL;
$title = $_POST['title'];
$price = $_POST['price'];
$model = $_POST['model'];
$description = $_POST['description'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$city = $_POST['city'];
$stmt = $dbh->prepare("INSERT INTO posts VALUES (?,?,?,?,?,?,?,?,?)");
$stmt->execute(array($id,$title, $price, $model, $description, $name, $email, $phone, $city));
【问题讨论】：
您是否尝试过此问题中列出的步骤：***.com/questions/2320069/jquery-ajax-file-upload？ 为了更好的解释你也可以访问这个链接***.com/questions/5392344/… 你正在执行一个数组！？这可能吗？ 顺便说一句，不要向数据库发送文件INTO，将其保存在您的服务器上并在您的数据库中放置指向该文件的指针，否则数据库稍后会变得很大开。 通过将其他数据附加到form_data 来传递其他数据，例如form_data.append('name','value')
【参考方案1】：
试试：
$(document).ready(function()
$("#ad_btn").on('click', function()
var title = $("#ad_title").val();
var price = $("#price").val();
var model = $("#model").val();
var description = $("#description").val();
var name = $("#name").val();
var email = $("#email").val();
var phone= $("#phone").val();
var city= $("#city").val();
var file_data = $('#file').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax(
url:'php/post.php',
type:'POST',
data: "title":title,"price":price,"model":model,"description":description,"name":name,"email":email,"phone":phone,"city":city,"form_data",form_data,
success:function(data)
alert(data);
);
);
);
【讨论】：
以上是关于使用ajax进行文件上传和数据插入的主要内容，如果未能解决你的问题，请参考以下文章
ajax 上传文件，post上传文件，ajax 提交 JSON 格式的数据