【发布时间】：2017-03-08 17:00:50
【问题描述】：
我有一个带有文件上传的表单。我想执行两项任务：一项是将数据提交到数据库并通过 ajax 上传文件，然后在 ajax 成功后另一个将要形成 action.ajax 正常工作但在 ajax 成功后表单动作不起作用 请帮忙
main.php
<!doctype html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function mycall() {
//disable the default form submission
event.preventDefault();
//grab all form data
var formData = new FormData(document.getElementById('data'));
$.ajax({
url: 'addToMySQL.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
}
});
return false;
}
</script>
</head>
<body>
<form method='post' enctype="multipart/form-data" id="data" action="try.php" >
<div class="form-input">
<label for="exampleSelect1" class="col-md-3 control-label">Type of Paper</label>
<div class="col-md-9">
<select class="form-control" id="Otop" name="Otop" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-input">
<label for="exampleSelect1" class="col-md-3 control-label">Paper upload</label>
<div class="col-md-9">
<input type="file" id="file" name="profileImg" >
</div>
</div>
</div>
<div class="form-input">
<div class="col-sm-12">
<input type="submit" class="btn btn-primary btn-lg btn-block" onclick="mycall()" name="OrderSubmit" value="Order">
</div>
</div>
</form>
</body>
</html>
addToMySQL.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include("dbconfig.php");
include('class/userClass.php');
$userClass = new userClass();
$Otop = $_POST['Otop'];
$Odiscipline = $_FILES['profileImg']['name'];
$target = "uploads/";
$fileTarget = $target.$Odiscipline;
$result = move_uploaded_file($_FILES['profileImg']['tmp_name'], "uploads/".$_FILES['profileImg']['name']);
$id = $userClass->userOrderInfo($Otop,$Odiscipline, $fileTarget);
if ($id) {
echo "done";
} else {
echo "Notdone";
}
userClass.php 中的 userOrderInfo 函数
/* User Payment */
public function userOrderInfo($Otop, $Odiscipline, $fileTarget)
{
try {
$db = getDB();
$stmt = $db->prepare("INSERT INTO orderinfo(Otop, Odiscipline, fileTarget) VALUES (:Otop, :Odiscipline, :fileTarget)");
$stmt->bindParam("Odiscipline", $Odiscipline) ;
$stmt->bindParam("Otop", $Otop) ;
$stmt->bindParam("fileTarget", $fileTarget) ;
$stmt->execute();
$db = null;
return true;
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
【问题讨论】：
-
不起作用是什么意思？告诉我们具体细节
-
@CamiloGo ya 在 ajax 成功后它不会去 try.php 这是表单操作。
-
我没有看到任何 id = data 的元素 ..
-
@scaisEdge var formData = new FormData(document.getElementById('data'));并且 id="data" 是提及表单标签
-
如果不执行ajax调用，你认为如何执行相关的成功函数？