Upload Images with Jquery and PHP via forms
Posted: Wed Oct 08, 2014 3:41 am
So, it took a lot of broken scripts or pay only with obscured code to figure out something simple that Actionscript 2 could accomplish 8 years ago, and normal JS ajax could as well.
This is the final version that has basic uploading, and you can change the upload folder, do incremental upload named, etc on your own.
Within a main folder, an image folder will be created if it is missing, and a jpeg jpg JPG Jpg etc will upload if it has the extension JPG jpg Jpg but not jpeg (you can change that yourself).
The image size matches PHP's built in 2mb limit but with php.ini and the apache server settings in .htaccess depending on your server, shared server, you can change this.
The HTML and JS form page (ajax_jq3.php)
The PHP engine that checks, renames,and saves the multipart file data your form page sends (ajax_test.php)
This is the final version that has basic uploading, and you can change the upload folder, do incremental upload named, etc on your own.
Within a main folder, an image folder will be created if it is missing, and a jpeg jpg JPG Jpg etc will upload if it has the extension JPG jpg Jpg but not jpeg (you can change that yourself).
The image size matches PHP's built in 2mb limit but with php.ini and the apache server settings in .htaccess depending on your server, shared server, you can change this.
The HTML and JS form page (ajax_jq3.php)
Code: Select all
<?php
/*
ajax_jq3.php v3.0 by Kristoffe Brodeur. ©2014 All Rights Reserved.
10-07-2014
*/
?>
<!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 charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="imgUp" name="imgUp" enctype='multipart/form-data' method="POST" action="#">
<input type="file" id="imgFile" name="imgFile">
<input type="submit" value="submit">
</form>
<div id='debug'>response here</div>
</body>
</html>
<script>
var debug=document.getElementById('debug');
//
$(document).ready(function()
{
//
$("form#imgUp").submit(function(event)
{
event.preventDefault();
var formData=new FormData($(this)[0]);
//
$.ajax(
{
url: 'ajax_test.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
beforeSend: check_img,
success: img_ok
});
return false;
});
});
//
function img_ok(sentData)
{
debug.innerHTML=sentData;
}
//
function check_img()
{
//check whether client browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
var fileInp=document.getElementById('imgFile');
var file=fileInp.files[0];
var fSize=file.size;
var fType=file.type;
//
switch(fType)
{
case 'image/jpeg':
break;
default:
debug.innerHTML=("["+fType+"] Unsupported file type. JPG only");
return false;
}
//
var fMax=2*1024*1024;//2mb php default, can be changed in php.ini and server side files per folder
//alert(fSize+":"+fMax);
//
if(fSize>fMax)
{
//alert("too big");
debug.innerHTML=("Filesize too big. "+fMax+" : "+fSize);
return false;
}
else
{
debug.innerHTML=("Filesize ok. "+fMax+" : "+fSize);
}
}
else
{
//Error for older unsupported browsers that doesn't support HTML5 File API
alert("Please upgrade your browser, because your current browser lacks some new features we need!");
}
}
</script>
Code: Select all
<?php
//
$to_root="";
$dirArea="img/";
$path=$to_root.$dirArea;
$imgName=strtolower($_FILES['imgFile']['name']);
$imgSize=$_FILES['imgFile']['size'];
$uploadedName=$_FILES['imgFile']['tmp_name'];
echo "name: $imgName | size: $imgSize";
//
if(!is_dir($path))
{
mkdir($path);
}
//
if(move_uploaded_file($uploadedName,$path.$imgName))
{
echo "|1";//ok
}
else
{
echo "|0";//error
}
?>