Databases
StackOverflow2013
Postsdbo
POHow to upload a file through jQuery or AJAX with text data and save the file name in to SQL database?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to upload a file through jQuery or AJAX with text data and save the file name in to SQL database?
    primarykey
    data
    text
    <p>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.</p> <p>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".</p> <p>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.</p> <p>My process PHP:</p> <pre><code>include ('connect.php'); $data = ("SELECT * FROM poiinfo"); $poiName = $_REQUEST['Name']; $poiDes = $_REQUEST['Descrip']; $poiCon = $_REQUEST['ConInfo']; /*$poiImg = $_REQUEST['Image']; */ &lt;-- 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"; } </code></pre> <p>My form:</p> <pre><code>&lt;?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; } ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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+'&amp;Descrip='+desc+'&amp;ConInfo='+con; $.ajax({ type:'POST', data:dataString, url:'AddPoiPro.php', success:function(data){ if(data="Data inserted") { //alert("Data Success"); document.getElementById('msg').innerHTML= "&lt;div style=\"background-color:#0F0; text-align:center; color: #060\"&gt;Data Saved&lt;/dive&gt;"; $('#msg').delay(1500).fadeOut(); } else { //alert("Not Inserted"); document.getElementById('msg').innerHTML= "&lt;div style=\"background-color:#0F0; text-align:center; color: red\"&gt;Data Not Saved&lt;/div&gt;"; } } }); }); }); &lt;/script&gt; &lt;title&gt;AddPOI&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form method="post" enctype="multipart/form-data" name="form1" id="form1"&gt; &lt;p&gt; &lt;label for="poiid"&gt;ID :&lt;/label&gt; &lt;input type="text" name="poiid" id="poiid" readonly="readonly" style="width:70px;" value="&lt;?php echo $tId; ?&gt;" /&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="Name"&gt;POI Name :&lt;/label&gt; &lt;input type="text" name="Name" id="Name" /&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="Descrip" style="alignment-adjust:middle"&gt;POI Description :&lt;/label&gt; &lt;textarea name="Descrip" id="Descrip" cols="45" rows="5"&gt;&lt;/textarea&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="ConInfo"&gt;Contact Infomation :&lt;/label&gt; &lt;textarea name="ConInfo" id="ConInfo" cols="45" rows="5"&gt;&lt;/textarea&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="Img"&gt;POI Image :&lt;/label&gt; &lt;!--&lt;input type="file" name="Image" id="Image" /&gt; --&gt; &lt;-- File upload place but for now it's commented out. &lt;/p&gt; &lt;p&gt;&lt;div id="msg"&gt;&lt;/div&gt;&lt;/p&gt; &lt;p&gt; &lt;div align="center"&gt; &lt;input type="button" name="Submit" id="save_data" value="Submit" style="width:100px;" /&gt; &lt;input type="reset" name="reset" id="reset" value="Rest Data" style="width:100px;" /&gt; &lt;/div&gt; &lt;/p&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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.</p> <p>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.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmarc_s
    1. USSadaruwan Samraweera
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to upload a file through jQuery or AJAX with text data and save the file name in to SQL database?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI am afraid you cannot send files via AJAX, however you have several options that will achieve a similar effect. Either, use an iframe (I know this sounds old-fashioned but it works), or there are many HTML5 plugins you can use.
      singulars
      1. POHow to upload a file through jQuery or AJAX with text data and save the file name in to SQL database?
      1. USBen Carey
    2. COyou can do this using uploadify try this out http://www.uploadify.com/demos/
      singulars
      1. POHow to upload a file through jQuery or AJAX with text data and save the file name in to SQL database?
      1. USsourabh kasliwal
    3. CO@BenCarey thx for the quick reply can u just elaborate on how to use the iFrame method it's might be old but can be used so please sir.
      singulars
      1. POHow to upload a file through jQuery or AJAX with text data and save the file name in to SQL database?
      1. USSadaruwan Samraweera
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload