I have tested every question here and have also googled alot, but did not find the something that work.
Here is my HTML:
And here is the 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();
});
});
}
MY PHP CODE:
$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"] . "
";
}
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 code is working fine the issue is somewhere in js file.
解决方案
I would use FormData for this task.
Here is an example of your code using 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
{
var formData = new FormData($('#createform')[0]); // use "[0]"
// 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 will support multi file upload!
Add to your Form tag the attribute: enctype="multipart/form-data"
NOTE: You may find that the $_FILES array is empty on server side page - In this case you need to make sure your server configuration allows file uploads, size limit of file upload is enough, post time
is enough etc....
The best way to begin is to make sure that file uploads is allowed and then testing with very
small files to be sure everything in your code is OK.