How to upload a file through jQuery or AJAX with text data and save the file name in to SQL database?
Question
I'm writing a small PHP script to add some data in to a MySQL database. I'm using jQuery to send my text data to the processing PHP file which will put the data in to the MySQL data base that part is ok and working with out any issue.
But in this same form I need to upload a file to a folder in the server and save that path or the file name in to the database column "Img".
I've searched through the Stack site but didn't get any clue how to do this. If jQuery can't do this please tell me how to archive this with out loosing the text submission part. I'm going to list my code here.
My process PHP:
include ('connect.php');
$data = ("SELECT * FROM poiinfo");
$poiName = $_REQUEST['Name'];
$poiDes = $_REQUEST['Descrip'];
$poiCon = $_REQUEST['ConInfo'];
/*$poiImg = $_REQUEST['Image']; */ <-- my Image data but this is not the way need correct this
$dbData = "INSERT INTO poiinfo(`Name`, `Des.`, `Contact`) VALUES ('$poiName','$poiDes','$poiCon')";
$putData = mysql_query($dbData);
if ($putData){
echo "Data inserted";
}else {
echo "Not Done";
}
My form:
<?php
/**
* @author SiNUX
* @copyright 2013
*/
include ('connect.php');
$lastId = mysql_query("SELECT ID FROM poiinfo ORDER BY ID DESC LIMIT 1");
if ($row = mysql_fetch_array($lastId)){
$nId = $row['ID'];
$nId == "0";
$nId = $nId++;
mysql_quary("INSERT INTO poiinfo ('ID') VALUES ('$nId')");
}else {
$lId = $row['ID'];
$lId = $lId + 0;
$lId++;
$tId = $lId;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#save_data").click(function(){
var name = document.getElementById("Name").value;
var desc = document.getElementById("Descrip").value;
var con = document.getElementById("ConInfo").value;
var dataString = 'Name='+name+'&Descrip='+desc+'&ConInfo='+con;
$.ajax({
type:'POST',
data:dataString,
url:'AddPoiPro.php',
success:function(data){
if(data="Data inserted") {
//alert("Data Success");
document.getElementById('msg').innerHTML= "<div style=\"background-color:#0F0; text-align:center; color: #060\">Data Saved</dive>";
$('#msg').delay(1500).fadeOut();
} else {
//alert("Not Inserted");
document.getElementById('msg').innerHTML= "<div style=\"background-color:#0F0; text-align:center; color: red\">Data Not Saved</div>";
}
}
});
});
});
</script>
<title>AddPOI</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" name="form1" id="form1">
<p>
<label for="poiid">ID :</label>
<input type="text" name="poiid" id="poiid" readonly="readonly" style="width:70px;" value="<?php echo $tId; ?>" />
</p>
<p>
<label for="Name">POI Name :</label>
<input type="text" name="Name" id="Name" />
</p>
<p>
<label for="Descrip" style="alignment-adjust:middle">POI Description :</label>
<textarea name="Descrip" id="Descrip" cols="45" rows="5"></textarea>
</p>
<p>
<label for="ConInfo">Contact Infomation :</label>
<textarea name="ConInfo" id="ConInfo" cols="45" rows="5"></textarea>
</p>
<p>
<label for="Img">POI Image :</label>
<!--<input type="file" name="Image" id="Image" /> --> <-- File upload place but for now it's commented out.
</p>
<p><div id="msg"></div></p>
<p>
<div align="center">
<input type="button" name="Submit" id="save_data" value="Submit" style="width:100px;" />
<input type="reset" name="reset" id="reset" value="Rest Data" style="width:100px;" />
</div>
</p>
</form>
</body>
</html>
Please help me as I said in most post's I saw that AJAX or jQuery can't handle the file upload so if there way to do it please educate me.
Also you guys are guru of coding I'm just a grasshopper so is this good coding or do I need to improve more on my style and also in the above form I have the ajax part in the header should I move it to another file and link it to the form.
1 answers
solution1
0 ACCPTED 2013-01-16 10:26:19
Unfortuanately, for security reasons, you cannot upload a file via AJAX. (Can you imagine what would happen if JavaScript could access your file system?)
The way round this is to use a form with the target attribute set to an invisible iframe . This will achieve a file upload without refreshing the page.
You may find this post useful.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.