我已经测试了这里的每个问题,也用谷歌搜索了很多,但没有找到有效的东西。
这是我的 HTML:
<div id="createarea">
<form id="createform" action="index/create/createcontrols.php" method="post" enctype="multipart/form-data">
<input id="title" type="text" name="title" size="30" value="Title"><br><br>
<input id="description" type="text" name="description" size="30" value="Description"><br><br>
<input id="keywords" type="text" name="keywords" size="30" value="Keywords"><br><br>
<input id="link" type="text" name="link" size="30" value="Link"><br><br>
<input id="file" type="file" name="file"><br><br>
<input id="submit" type="button" name='submit' value="Create" onclick="myFunction()">
</form>
<div id="createformresults">
</div>
</div>
这是 JavaScript:
function myFunction() {
$(function () {
$('#createform').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'index/create/createcontrols.php',
data: $('#createform').serialize(),
success: function () {
document.getElementById('createarea').innerHTML = "SUCCESS";
}
});
e.preventDefault();
});
});
}
我的 PHP 代码:
<?php
$db=mysql_connect('','','') or die(mysql_error());
mysql_select_db("", $db) or die(mysql_error());
$title = $_POST["title"];
$description = $_POST["description"];
$keywords = $_POST["keywords"];
$link = $_POST["link"];
$image=$_FILES["file"]["name"];
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && ($_FILES["file"]["size"] < 20000) && in_array($extension, $allowedExts)) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
}
else {
if (file_exists("temp/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " already exists. ";
}
else {
move_uploaded_file($_FILES["file"]["tmp_name"], "temp/" . $_FILES["file"]["name"]);
}
}
}
else {
echo "Invalid file";
}
$qry="insert createcontent values('null','$title','$description','$keywords','$link','$image')";
$res= mysql_query($qry) or die(mysql_error());
if(mysql_affected_rows()==1) {
echo "Success";
}
else {
echo "Not Saved";
}
?>
PHP 代码工作正常,问题出在 js 文件中的某个位置。
最佳答案
我将使用 FormData
来完成此任务。
这是使用 FormData 的代码示例:
$(function () { //On dom ready:
$("#createform").submit(function (e) { //will be triggered on submit:
e.preventDefault();
if( window.FormData !== undefined )
//make sure that we can use FormData ie>9, chrome > 7, opera > 12 safari >5, android > 3 gecko mobile > 2, opera mobile >12 <- wil support XHR too
{
var formData = new FormData($('#createform')[0]); // use "[0]" <- important
// you can append aditional values (regular text): formData.append("be","some value");
$.ajax({
url: 'index/create/createcontrols.php', //Server script to process data
type: 'POST',
data: formData,
xhr: function() { },
success: function(response){ $("#createformresults").text("SUCCESS"); },
error: function (jqXHR, textStatus, errorThrown) { $("#createformresults").text(errorThrown); },
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
} else {
//Fallback
}
return false;
});
});
FormData将支持多文件上传!
向表单标记添加属性:enctype="multipart/form-data"
注意:您可能会发现服务器端页面上的 $_FILES
数组为空 - 在这种情况下,您需要确保您的服务器配置允许文件上传、大小文件上传限制够了,发帖时间
够不够等等....
开始的最佳方法是确保允许文件上传,然后使用非常多的测试 小文件,以确保代码中的所有内容都正常。
关于javascript - 使用ajax提交表单来上传文件和其他字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22522233/