{"id":6,"date":"2010-12-06T21:49:46","date_gmt":"2010-12-06T21:49:46","guid":{"rendered":"http:\/\/quanticalabs.com\/quanticawp\/?page_id=6"},"modified":"2021-08-26T13:33:45","modified_gmt":"2021-08-26T13:33:45","slug":"ajax-multi-upload","status":"publish","type":"page","link":"https:\/\/quanticalabs.com\/quanticawp\/ajax-multi-upload\/","title":{"rendered":"Ajax Multi Upload"},"content":{"rendered":"<h2>Example 1 &#8211; auto upload and multi upload<\/h2>\n<p>Features:<\/p>\n<ul>\n<li>upload files automatically (without the need to push the upload button)<\/li>\n<li>upload multiple files at once (you can select more than one file in &#8220;browse file&#8221; window)<\/li>\n<li>file size limit &#8211; 200 kB<\/li>\n<\/ul>\n<p><input class='AMU' uploadscript='https:\/\/quanticalabs.com\/quanticawp\/wp-content\/plugins\/ajax_multi_upload\/upload.php' type='file' path='files\/' starton='auto' savedata='true' posttype='amu_submission' attachimages='currentPost' requiredfields='' sendemail='false' buttoncaption='Upload' multi='true' afterupload='link' method='post' maxsize='200'data='&#039;postId&#039;:&#039;6&#039;,&#039;userId&#039;:&#039;0&#039;,&#039;savedata&#039;:&#039;true&#039;,&#039;attachimages&#039;:&#039;currentPost&#039;' ajax='false' allowremove='false' \/><br \/>\nImplementation &#8211; just use the shorcode:<\/p>\n<pre>&#091;ajax_multi_upload startOn='auto' multi='true' maxSize='200'&#093;<\/pre>\n<h2>Example 2 &#8211; upload single file<\/h2>\n<p>Features:<\/p>\n<ul>\n<li>upload file manually (after press the upload button)<\/li>\n<li>set upload button caption<\/li>\n<li>show image preview after upload<\/li>\n<li>file extension filter<\/li>\n<li>allow remove after upload<\/li>\n<li>file size limit &#8211; 200 kB<\/li>\n<\/ul>\n<p><input class='AMU' uploadscript='https:\/\/quanticalabs.com\/quanticawp\/wp-content\/plugins\/ajax_multi_upload\/upload.php' type='file' path='files\/' starton='manually' savedata='true' posttype='amu_submission' attachimages='currentPost' requiredfields='' sendemail='false' buttoncaption='Upload' multi='false' afterupload='image' filetype='image\/png,image\/jpeg,image\/gif' method='post' maxsize='200'data='&#039;postId&#039;:&#039;6&#039;,&#039;userId&#039;:&#039;0&#039;,&#039;savedata&#039;:&#039;true&#039;,&#039;attachimages&#039;:&#039;currentPost&#039;' ajax='false' allowremove='true' \/><br \/>\nImplementation:<\/p>\n<pre>&#091;ajax_multi_upload startOn='manually' buttonCaption='Upload' afterUpload='image' fileType='image\/png,image\/jpeg,image\/gif' allowRemove='true' maxSize='200'&#093;<\/pre>\n<h2>Example 3 &#8211; thumbnails<\/h2>\n<p>Features:<\/p>\n<ul>\n<li>create 3 thumbnails at once for each image<\/li>\n<li>set thumbnails dimensions<\/li>\n<li>set thumbnails crop parameter<\/li>\n<li>set after upload parameter for each thumbnail<\/li>\n<li>show file name after upload<\/li>\n<li>file size limit &#8211; 200 kB<\/li>\n<\/ul>\n<p><input class='AMU' uploadscript='https:\/\/quanticalabs.com\/quanticawp\/wp-content\/plugins\/ajax_multi_upload\/upload.php' type='file' path='files\/' starton='auto' savedata='true' posttype='amu_submission' attachimages='currentPost' requiredfields='' sendemail='false' buttoncaption='Upload' multi='true' afterupload='filename' thumbnails='90x90,100x,x50' thumbnailscrop='true,false,false' filetype='image\/png,image\/jpeg,image\/gif' method='post' thumbnailsafterupload='image,image,image' maxsize='200'data='&#039;postId&#039;:&#039;6&#039;,&#039;userId&#039;:&#039;0&#039;,&#039;savedata&#039;:&#039;true&#039;,&#039;attachimages&#039;:&#039;currentPost&#039;' ajax='false' allowremove='false' \/><br \/>\nImplementation:<\/p>\n<pre>&#091;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'&#093;<\/pre>\n<h2>Example 4 &#8211; integration with form<\/h2>\n<p>Features:<\/p>\n<ul>\n<li>upload start on form submition<\/li>\n<li>file size limit &#8211; 200 kB<\/li>\n<\/ul>\n<form id=\"form\" method=\"post\" action=\"\/quanticawp\/formProcessor.php\">\n<p><div>Name:<\/div>\n<p><input type=\"text\" name=\"name\" \/><\/p>\n<div>Surname:<\/div>\n<p><input type=\"text\" name=\"surname\" \/><\/p>\n<p><input class='AMU' uploadscript='https:\/\/quanticalabs.com\/quanticawp\/wp-content\/plugins\/ajax_multi_upload\/upload.php' type='file' path='files\/' starton='onSubmit:form' savedata='true' posttype='amu_submission' attachimages='currentPost' requiredfields='' sendemail='false' buttoncaption='Upload' multi='true' afterupload='filename' method='post' maxsize='200'data='&#039;postId&#039;:&#039;6&#039;,&#039;userId&#039;:&#039;0&#039;,&#039;savedata&#039;:&#039;true&#039;,&#039;attachimages&#039;:&#039;currentPost&#039;' ajax='false' allowremove='false' \/><input type=\"submit\" value=\"Submit\" \/><\/p>\n<\/form>\n<p>Implementation:<\/p>\n<pre>&lt;form id='form' method='post' action='\/quanticawp\/formProcessor.php'&gt;\r\n\t&lt;p&gt;\r\n\t&lt;div&gt;Name:&lt;\/div&gt;&lt;input type='text' name='name' \/&gt;\r\n\t&lt;div&gt;Surname:&lt;\/div&gt;&lt;input type='text' name='surname' \/&gt;&lt;br \/&gt;\r\n\t&#091;ajax_multi_upload startOn='onSubmit:form' multi='true' afterUpload='filename' maxSize='200'&#093;\r\n\t&lt;input type=\"submit\" value=\"Submit\" \/&gt;\r\n\t&lt;\/p&gt;\r\n&lt;\/form&gt;<\/pre>\n<h2>Example 5 &#8211; integration with form &#8211; ajax<\/h2>\n<p>Features:<\/p>\n<ul>\n<li>upload start on form submition<\/li>\n<li>submittion via ajax (without page reload)<\/li>\n<li>display message after submission<\/li>\n<li>display loader during submission<\/li>\n<li>file size limit &#8211; 200 kB<\/li>\n<\/ul>\n<form id=\"formAjax\" method=\"post\" action=\"\/quanticawp\/formProcessorAjax.php\">\n<div class=\"amu_info\" id=\"info\"><\/div>\n<p><div>Name:<\/div>\n<p><input type=\"text\" name=\"name\" \/><\/p>\n<div>Surname:<\/div>\n<p><input type=\"text\" name=\"surname\" \/><\/p>\n<p><input class='AMU' uploadscript='https:\/\/quanticalabs.com\/quanticawp\/wp-content\/plugins\/ajax_multi_upload\/upload.php' type='file' path='files\/' starton='onSubmit:formAjax' savedata='true' posttype='amu_submission' attachimages='currentPost' requiredfields='' sendemail='false' buttoncaption='Upload' multi='true' afterupload='filename' method='post' maxsize='200'data='&#039;postId&#039;:&#039;6&#039;,&#039;userId&#039;:&#039;0&#039;,&#039;savedata&#039;:&#039;true&#039;,&#039;attachimages&#039;:&#039;currentPost&#039;' ajax='true' ajaxinfoid='info' ajaxloaderid='loader' allowremove='false' \/><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>\n<\/form>\n<p>Implementation:<\/p>\n<pre>&lt;form id=\"formAjax\" method=\"post\" action=\"\/quanticawp\/formProcessorAjax.php\"&gt;\r\n\t&lt;p&gt;\r\n\t&lt;div class=\"amu_info\" id=\"info\"&gt;&lt;\/div&gt;\r\n\t&lt;div&gt;Name:&lt;\/div&gt;&lt;input type=\"text\" name=\"name\" \/&gt;\r\n\t&lt;div&gt;Surname:&lt;\/div&gt;&lt;input type=\"text\" name=\"surname\" \/&gt;&lt;br\/&gt;\r\n\t&#091;ajax_multi_upload startOn='onSubmit:formAjax' ajax='true' ajaxInfoId='info' ajaxLoaderId='loader' multi='true' afterUpload='filename' maxSize='200'&#093;\r\n\t&lt;input type=\"submit\" value=\"Submit\" \/&gt;\r\n\t&lt;span class=\"amu_loader\" id=\"loader\"&gt;\r\n\t\t&lt;img src='\/quanticawp\/wp-content\/plugins\/ajax_multi_upload\/ajax-loader.gif'\/&gt;\r\n\t&lt;\/span&gt;\r\n\t&lt;\/p&gt;\r\n&lt;\/form&gt;<\/pre>\n<h2>Example 6 &#8211; custom upload button and passing custom data to upload script<\/h2>\n<p>Features:<\/p>\n<ul>\n<li>custom upload button<\/li>\n<li>passing data to upload script<\/li>\n<li>file size limit &#8211; 200 kB<\/li>\n<\/ul>\n<p><input class='AMU' uploadscript='https:\/\/quanticalabs.com\/quanticawp\/wp-content\/plugins\/ajax_multi_upload\/upload.php' type='file' path='files\/' starton='auto' savedata='true' posttype='amu_submission' attachimages='currentPost' requiredfields='' sendemail='false' buttoncaption='Upload' multi='true' afterupload='link' method='post' maxsize='200' buttonclass='amu-custom-button' bwidth='100' bheight='30' buttontext='&amp;nbsp;' data='&quot;variable1&quot;:&quot;5&quot;, &quot;variable2&quot;:&quot;10&quot;,&#039;postId&#039;:&#039;6&#039;,&#039;userId&#039;:&#039;0&#039;,&#039;savedata&#039;:&#039;true&#039;,&#039;attachimages&#039;:&#039;currentPost&#039;' ajax='false' allowremove='false' \/><br \/>\nImplementation:<\/p>\n<pre>&#091;ajax_multi_upload startOn='auto' multi='true' afterUpload='link' buttonClass='amu-custom-button' buttonText='&amp;nbsp;' bwidth='100' bheight='30' data='\"variable1\":\"5\", \"variable2\":\"10\"' maxSize='200'&#093;<\/pre>\n<p><\/p>\n<h3>Questions &#038; help<\/h3>\n<p>If you have any questions please send them to my email via <a href='https:\/\/1.envato.market\/quanticalabs-profile-contact-form-codecanyon' target=\"_top\">contact form<\/a> or ask on the <a href=\"https:\/\/support.quanticalabs.com\" target=\"_top\">Support Forum<\/a>.<\/p>\n<h3>Purchase<\/h3>\n<p><a href='https:\/\/1.envato.market\/ajax-multi-upload-for-wordpress' target=\"_top\"><img src='https:\/\/envato.s3.amazonaws.com\/referrer_adverts\/cc_180x100_v1.gif'><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Example 1 &#8211; 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 &#8220;browse file&#8221; window) file size limit &#8211; &hellip; <a href=\"https:\/\/quanticalabs.com\/quanticawp\/ajax-multi-upload\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/pages\/6"}],"collection":[{"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":46,"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":18282,"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/pages\/6\/revisions\/18282"}],"wp:attachment":[{"href":"https:\/\/quanticalabs.com\/quanticawp\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}