[SOLVED] Uploading images using php, but without page refresh

Uploading images using php, but without page refresh

So generally, i don't have a problem (yet), but I need advice. I want't to make a page where a user can upload his/hers image. But the upload should not refresh the page as the other data that a user enters will get lost. I know there is a bunch of ajax and php uploader posts, but here's the thing. Using XMLHttpRequest 2 isn't supported in older browsers. I would like at least IE9 to be supported. I also know there is an iframe solution. But using iframe's today sounds to me like driving Mr.Beans Mini when you have a new BMW in the garage (no offense). So can anyone give me advice on what should I do? Which way should I go?

Thanks

Solution

This isn't the best way to do things, infact I am looking for a faster way to do this, but here is something I have coded myself that will upload the image data to the database and also automatically change your profile photo without refresh.

First the HTML, CSS and Javascript/JQuery for the client side.

//NOTE: this code is jquery, go to JQuery.com and find the download then link it in a script tag

$("#activateFile").on('click', function(){
   $("#fileBrowser").click();
  });

//if you want a finish edit button then use this otherwise put this code in the fileBrowser change event handler below KEEP THE readURL(this) OR IT WON'T WORK!

$("#finishEdit").on('click', function(){
  
    var imgData = document.getElementById('image').src;
  
   //imageData is the variable you use $_POST to get the data in php
   $.post('phpscriptname.php', {imageData:imgData}, function(data){ 
     
        //recieve information back from php through the echo function(not required)
     
     });
  });


$("#fileBrowser").change(function(){
    readURL(this);
  });

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
	reader.onload = function (e) {
	  $('#image').attr('src', e.target.result)
    };
	  		
  reader.readAsDataURL(input.files[0]);
  }
}

#fileBrowser{
  display: none;
  }

#image{
  width: 200px;
  height: 200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Whatever your title is</title>
   </head>
  <body>
    
    <img id="image" src="somesource.png" alt="somesource"/>
    <!-- NOTE: you can use php to input the users current image in the source attribute -->
    <br/>
    <br/>
    
    <!-- position and style these however you like -->
    
    <input type="file" id="fileBrowser"> <!-- this is display none in css -->
    <button id="activateFile">Choose files</button>
    <br/>
    <br/>
    <button id="finishEdit">Done</button>
    
  </body>
</html>

Now I will I show the server side with the database

require("yourconnectiontodatabase.php"); //create a connection to your db.

$imgData = $_POST['imageData']; //the same variable we gave it in the jquery $.post method.

//The bad part now is because we are using data straight from the input I don't think it's possible to know if the content type of the file is an image. This is a security flaw as people could try upload .exe files however, I do know the imagedata we get in javascript contains the filetype it is so you could check in javascript if it's an image type like if it's png or jpeg.

//NOTE: when looking for types in images use image/type for example image/png

//upload image to database

$updateprofile = mysql_query("UPDATE table_name SET profileimage='$imgData' ");