The solution is to use modern methods such as FileReader and Canvas (but this only works with the latest modern browsers).
http://caniuse.com/filereader
http://caniuse.com/canvas
In this example, I will show how to allow the client to resize the image before loading, setting the maximum proportion of width and height.
In this example, max widthHeight = 64; your final image is c.toDataURL ();
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> var h=function(e){ var fr=new FileReader(); fr.onload=function(e){ var img=new Image(); img.onload=function(){ var MAXWidthHeight=64; var r=MAXWidthHeight/Math.max(this.width,this.height), w=Math.round(this.width*r), h=Math.round(this.height*r), c=document.createElement("canvas"); c.width=w;c.height=h; c.getContext("2d").drawImage(this,0,0,w,h); this.src=c.toDataURL(); document.body.appendChild(this); } img.src=e.target.result; } fr.readAsDataURL(e.target.files[0]); } window.onload=function(){ document.getElementById('f').addEventListener('change',h,false); } </script> </head> <body> <input type="file" id="f"> </body> </html>
In the code canvas area, you can also add a trim function.
Edit according to comments
c.toDataURL();
is the base64_string of the image, which you can save in hidden input, add to new FormData() or wherever you want.
on server
$data=explode(',',$base64_string); $image=base64_decode($data[1]);
write to file
$f=fopen($fileName,"wb"); fwrite($f,$image); fclose($f);
or
$gd=imagecreatefromstring($image);
you can also save the entire base64 image string in the database and always use it.