Image Multi Upload

example 1 - upload single image

Using Image Multi Upload to upload single image at once:
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, startOn, afterUpload, buttonCaption, maxSize, fileType, allowRemove (see more in documentation)

Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<input class="IMU" type="file" path="files/" startOn="manually" buttonCaption="upload" afterUpload="image" maxSize="200" fileType="image/png,image/jpeg,image/gif" allowRemove="true" />

example 2 - auto upload and multiupload

Using Image Multi Upload to upload file automatically (without the need to push the upload button), to upload multiple files at once select more files in "browse file" window:
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, afterUpload, maxSize, allowRemove (see more in documentation)

Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<input class="IMU" type="file" path="files/" multi="true" startOn="auto" afterUpload="image" maxSize="200" allowRemove="true" />

example 3 - thumbnails

Using Image Multi Upload to create image thumbnails:
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, afterUpload, thumbnails, thumbnailsFolders, thumbnailsAfterUpload, maxSize, fileType (see more in documentation)

Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<input class="IMU" type="file" path="files/" multi="true" startOn="auto" afterUpload="image" thumbnails="90x90,100x,x200" thumbnailsFolders="files/small/,files/middle/,files/big/" thumbnailsAfterUpload="link,image,Thumbnail created!" maxSize="200" fileType="image/png,image/jpeg,image/gif" />

example 4 - watermarks

Using Image Multi Upload to create image watermarks:
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, afterUpload, allowRemove, data, maxSize (see more in documentation)

Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<input class="IMU" type="file" path="files/" multi="true" startOn="auto" afterUpload="image" allowRemove="true" data="'watermark_path0':'watermark0.jpg','watermark_bottom0':'10','watermark_right0':'5','text_watermark_text0':'sample text','text_watermark_width0':'100p','text_watermark_height0':'40','text_watermark_background_color0':'#000000','text_watermark_text_color0':'#ffffff','text_watermark_bg_transparency0':'60','text_watermark_text_transparency0':'0','text_watermark_font0':'arial.ttf','text_watermark_font_size0':'14','text_watermark_text_x0':'10','text_watermark_text_y0':'25','text_watermark_right0':'0','text_watermark_bottom0':'0'" maxSize="200"/>

example 5 - integration with form

Using Image Multi Upload with custom form (in this example you be able to upload files in different formats - not only images):
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, afterUpload, maxSize (see more in documentation)
Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<form id="form" method="post" action="formProcessor.php">

				    Name: <input type="text" name="name" />  

				    Surname: <input type="text" name="surname" /><br /><br />

				    <input class="IMU" type="file" path="files/" multi="true" startOn="onSubmit:form" afterUpload="filename" maxSize="200" />

				    <input type="submit" value="Submit" />

			</form>

example 6 - integration with form - ajax

Using Image Multi Upload with custom form (in this example you be able to upload files in different formats - not only images):
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, ajax, ajaxInfoId, startLoaderId, afterUpload, maxSize (see more in documentation)
Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<form id="formAjax" method="post" action="formProcessorAjax.php">

				<div class="imu_info" id="info"></div>
				    Name: <input type="text" name="name" />  

				    Surname: <input type="text" name="surname" /><br /><br />

				    <input class="IMU" type="file" path="files/" multi="true" startOn="onSubmit:formAjax" ajax="true" ajaxInfoId="info" ajaxLoaderId="loader" afterUpload="filename" maxSize="200" />

				    <input type="submit" value="Submit" />

				<span class="imu_loader" id="loader">

				    <img src='ajax-loader.gif'/>

				</span>

			</form>

example 7 - upload statistics

Using Image Multi Upload to display upload statistics:
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, afterUpload, maxSize (see more in documentation)
Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<input class="IMU" type="file" path="files/" multi="true" startOn="auto" afterUpload="Uploaded {successful} files!<br />Errors: {errors}<br />Attempted: {attempted}" maxSize="200" />

example 8 - custom upload button

Using Image Multi Upload with custom upload button:
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, afterUpload, buttonClass, buttonText, bwidth, bheight, allowRemove, maxSize (see more in documentation)
Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<input class="IMU" type="file" path="files/" multi="true" startOn="auto" afterUpload="link" buttonClass="amu-custom-button" buttonText='&nbsp;' bwidth="100" bheight="30" allowRemove="false" maxSize="200" />

example 9 - pass custom data

Using Ajax Multi Upload to pass custom data (json format or jQuery selector), passed data will be aviable in upload.php script by $_POST table:
Follow the first three steps outlined in implementation.
In place of the code from step 4, insert the code from this example.
Parameters used in example: path, multi, startOn, afterUpload, data, maxSize (see more in documentation)
Notice: due to the maxSize parameter used in example you can upload files with size not greater than 200 kB.

Example
Code


			<input type="text" name="firstInput" /><br />

			<input type="text" name="otherInput" id="someId" /><br />

			<input class="IMU" type="file" path="files/" multi="true" startOn="auto" afterUpload="link" data="'variable1':'value1', 'variable2':'value2', 'formInput':'selector:[name=firstInput]', 'anotherFormInput':'selector:#someId'" maxSize="200" />

Implementation

Aviable after purchase

Documentation

Aviable after purchase