upload image using ajax in php form submit

Question

i want submit a form data into mysql using ajax. i am not so much familiar with ajax but i tried a code which i understand,all text data submitted into database, i cant upload & store image using this code, i don't know how to do this. & also move to another page using header but i don't know where i write that code...! this is my form & script

<html>
<body>
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
 var ajaxRequest;  // The variable that makes Ajax possible!
 
 try{
  // Opera 8.0+, Firefox, Safari
  ajaxRequest = new XMLHttpRequest();
 } catch (e){
  // Internet Explorer Browsers
  try{
   ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try{
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e){
    // Something went wrong
    alert("Your browser broke!");
    return false;
   }
  }
 }
 // Create a function that will receive data sent from the server
 ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
   
   var ajaxDisplay = document.getElementById('ajaxDiv');
   ajaxDisplay.innerHTML = ajaxRequest.responseText;
  }
 }


            var nkname = document.getElementById('nkname').value;
            var sweaterpic= document.getElementById('sweaterpic').value;
         var size= document.getElementById('size').value;
            var category= document.getElementById('category').value;
          var style= document.getElementById('style').value;
            var fabric= document.getElementById('fabric').value;
         var aboutsweater= document.getElementById('aboutsweater').value;
 
 var queryString = "?nkname=" + nkname + "&sweaterpic=" + sweaterpic + "&size=" + size + "&category=" + category+ "&style=" + style+ "&fabric=" + fabric+ "&aboutsweater=" + aboutsweater;
 ajaxRequest.open("GET", "Uploadsweater1.php" + queryString, true);
 ajaxRequest.send(null); 
}

</script>



<form name='myForm' enctype="multipart/form-data">
Sweater Nick name: <input type='text' id='nkname' /> <br />
Sweater Pic:<input type="file" id="sweaterpic" class="form-control" style="width:96%;"></br>
Select Size:<select id="size" placeholder="Size">
     <option value="select">--Choose Size--</option>
     <option value="XS">XS</option>
     <option value="S">S</option>
     <option value="M">M</option>
     <option value="L">L</option>
     <option value="XL">XL</option>
     <option value="XXL">XXL</option>
    </select><br />
Select Category: <select id="category" placeholder="Category">
                                 <option value="select">--Choose Category--</option>
                                <option value="Men">Men</option>
                                <option value="Women">Women</option>
                                <option value="Kids">Kids</option>
                                </select><br />
Select Style:<select id="style"  placeholder="Style">
     <option value="select">--Choose Style--</option>
     <option value="Cardigan">Cardigan - Sweater that opens in the front.</option>
     <option value="Pullover">Pullover - Sweater that is put on over your head with no opening in the front.</option>
     <option value="Vest">Vest - Any sweater without arms is a vest even if you pull it over your head or it has an open front.</option>
    </select><br />
Select Fabric:<select id="fabric"  placeholder="Fabric">
     <option value="select">--Choose Fabric--</option>
     <option value="Cotton">Cotton</option>
     <option value="Wool">Wool</option>
     <option value="Polyester">Polyester</option>
     <option value="Nylon">Nylon</option>
     <option value="Acrylic">Acrylic</option>
     <option value="Lycra">Lycra</option>
     <option value="Rayon">Rayon</option>
     <option value="Other">Other</option>
    </select><br />
About Sweater:<textarea cols="30" rows="10" id="aboutsweater"  placeholder="About this Sweater"></textarea> <br />


<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

this is Uploadsweater1.php:

<?php
include('connection.php');
    // Retrieve data from Query String
$nkname= $_GET['nkname'];
$sweaterpic=$_GET['sweaterpic'];
$size= $_GET['size'];
$category= $_GET['category'];
$style= $_GET['style'];
$fabric= $_GET['fabric'];
$aboutsweater= $_GET['aboutsweater'];

        $filename =  $_FILES['sweaterpic']['name'];
        $filetype =  $_FILES['sweaterpic']['type'];
        $filesize =  $_FILES['sweaterpic']['size'];
        $filepath =  $_FILES['sweaterpic']['tmp_name'];



    $m = move_uploaded_file($filepath,"upload/".$filename);

                // Escape User Input to help prevent SQL Injection
$nkname= mysql_real_escape_string($nkname);
$size= mysql_real_escape_string($size);
$category= mysql_real_escape_string($category);
$style= mysql_real_escape_string($style);
$fabric= mysql_real_escape_string($fabric);
$aboutsweater= mysql_real_escape_string($aboutsweater);

$q="insert into `usersweater`(`SNickname`,`Sweaterpic`,`Size`,`Category`,`Fabric`,`Style`,`About`) values('$nkname','$filename ','$size','$category','$fabric','$style','$aboutsweater')";
$r=mysql_query($q);
?>

somewhere i am wrong

check http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php — Sougata Bose, Apr 15 '15 at 05:27

leitning · Answer 1 · 2015-04-15T19:59:27.270

You can't upload a file with GET, use POST

Also, you should really do some checking of the file before you throw it into the server/application.

Check for errors with something along the lines of this

        $error = $_FILES['sweaterpic']['error'];

        // Check errors
        if($error > 0) {
            $debugHTML = "<span class='error'>Error on upload: ";
            switch ($error) {
                case 1: $debugHTML .= "File exceeded upload_max_filesize";    break;
                case 2: $debugHTML .= "File exceeded max_file_size"; break;
                case 3: $debugHTML .= 'File only partially uploaded'; break;
                case 4: $debugHTML .= 'No file uploaded'; break;
            }                                 
            $debugHTML .= '</span><br />';

And make sure it's an image. This is something I made for an old application.

$a = getimagesize($filePath);
if(!$a) {
    if(is_dir($filePath))
        rmdir($filePath); // Delete directory
    else
        unlink($filePath); // Delete file
    return false;
}
$type = $a['mime'];

if($type != 'image/gif' && $type != 'image/jpeg' && $type != 'image/png') {
    unlink($filePath);
    return false;
}

I used getimagesize because I was going on to resize the image. There's also a 'type' in the files array: $_FILES['sweaterpic']['type'] — leitning, Apr 15 '15 at 20:06
may u are right...bt explain in my code...how pass data using post using ajax..in code where & what changes i have to do.....plz..help — Ketan Joshi, Apr 17 '15 at 12:30

upload image using ajax in php form submit

1 Answers1