Recently i wanted to create a simple php based upload with reloading the page. This script dose the same job :
You need to remember to make your upload folder as writable and one more thing, ajax do not support upload function thats the reason we are using php for uploading but this script does give you a feel of ajax.
You need only need to include two file one java script “ajaxupload.js” and one php script “ajaxupload.php”.
Step 1:
include your java script
<script src="scripts/ajaxupload.js" type="text/javascript"></script>
Step2 :
With the upload you can specify the following type :
<!–
VERY IMPORTANT! Update the form elements below ajaxUpload fields:
1. form – the form to submit or the ID of a form (ex. this.form or standard_use)
2. url_action – url to submit the form. like ‘action’ parameter of forms.
3. id_element – element that will receive return of upload.
4. html_show_loading – Text (or image) that will be show while loading
5. html_error_http – Text (or image) that will be show if HTTP error.
VARIABLE PASSED BY THE FORM:
maximum allowed file size in bytes:
maxSize = 9999999999
maximum image width in pixels:
maxW = 200
maximum image height in pixels:
maxH = 300
the full path to the image upload folder:
fullPath = http://blog.netspaceindia.com/demo/php_ajax_image_upload/uploads/
the relative path from scripts/ajaxupload.php -> uploads/ folder
relPath = ../uploads/
The next 3 are for cunstom matte color of transparent images (gif,png), use RGB value
colorR = 255
colorG = 255
colorB = 255
The form name of the file upload script
filename = filename
–>
In your main html file place form tag like :
<form action="scripts/ajaxupload.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<p><input type="file" name="filename" /></p>
<button onclick="ajaxUpload(this.form,'scripts/ajaxupload.php?filename=filename&maxSize=9999999999&maxW=200&fullPath=http://blog.netspaceindia.com/demo/php_ajax_image_upload/uploads/&relPath=../uploads/&colorR=255&colorG=255&colorB=255&maxH=300','upload_area','File Uploading Please Wait...<br /><img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' />','<img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /> Error in Upload, check settings and path info in source code.'); return false;">Upload Image</button>
</form>
Create a folder with name upload and enjoy.
Read the rest of this entry »
.gif)
