Ajax Multi Upload

Example 1 – auto upload and multi upload

Features:

  • upload files automatically (without the need to push the upload button)
  • upload multiple files at once (you can select more than one file in “browse file” window)
  • file size limit – 200 kB


Implementation – just use the shorcode:

[ajax_multi_upload startOn='auto' multi='true' maxSize='200']

Example 2 – upload single file

Features:

  • upload file manually (after press the upload button)
  • set upload button caption
  • show image preview after upload
  • file extension filter
  • allow remove after upload
  • file size limit – 200 kB


Implementation:

[ajax_multi_upload startOn='manually' buttonCaption='Upload' afterUpload='image' fileType='image/png,image/jpeg,image/gif' allowRemove='true' maxSize='200']

Example 3 – thumbnails

Features:

  • create 3 thumbnails at once for each image
  • set thumbnails dimensions
  • set thumbnails crop parameter
  • set after upload parameter for each thumbnail
  • show file name after upload
  • file size limit – 200 kB


Implementation:

[ajax_multi_upload startOn='auto' multi='true' afterUpload='filename' fileType='image/png,image/jpeg,image/gif' thumbnails='90x90,100x,x50' thumbnailsCrop='true,false,false' thumbnailsAfterUpload='link,image,image' maxSize='200']

Example 4 – integration with form

Features:

  • upload start on form submition
  • file size limit – 200 kB

Name:

Surname:

Implementation:

<form id='form' method='post' action='/quanticawp/formProcessor.php'>
	<p>
	<div>Name:</div><input type='text' name='name' />
	<div>Surname:</div><input type='text' name='surname' /><br />
	[ajax_multi_upload startOn='onSubmit:form' multi='true' afterUpload='filename' maxSize='200']
	<input type="submit" value="Submit" />
	</p>
</form>

Example 5 – integration with form – ajax

Features:

  • upload start on form submition
  • submittion via ajax (without page reload)
  • display message after submission
  • display loader during submission
  • file size limit – 200 kB

Name:

Surname:

Implementation:

<form id="formAjax" method="post" action="/quanticawp/formProcessorAjax.php">
	<p>
	<div class="amu_info" id="info"></div>
	<div>Name:</div><input type="text" name="name" />
	<div>Surname:</div><input type="text" name="surname" /><br/>
	[ajax_multi_upload startOn='onSubmit:formAjax' ajax='true' ajaxInfoId='info' ajaxLoaderId='loader' multi='true' afterUpload='filename' maxSize='200']
	<input type="submit" value="Submit" />
	<span class="amu_loader" id="loader">
		<img src='/quanticawp/wp-content/plugins/ajax_multi_upload/ajax-loader.gif'/>
	</span>
	</p>
</form>

Example 6 – custom upload button and passing custom data to upload script

Features:

  • custom upload button
  • passing data to upload script
  • file size limit – 200 kB


Implementation:

[ajax_multi_upload startOn='auto' multi='true' afterUpload='link' buttonClass='amu-custom-button' buttonText='&nbsp;' bwidth='100' bheight='30' data='"variable1":"5", "variable2":"10"' maxSize='200']

Questions & help

If you have any questions please send them to my email via contact form or ask on the Support Forum.

Purchase