In a previous post I’ve showed how to upload images from frontend in WordPress. As requested by many of my readers, today I am going to put it further to show you how to make it with AJAX.
Before moving on, I recommend you to read that post because we’ll use many concepts mentioned there and I won’t repeat them again here.
Now let’s get to the dirty part.
First we’ll create the form elements.
You’ll only pay attention to L10-L20. The other parts are the same codes as you see for any WordPress file. Here I just create a sample page template named “Image Upload” for this excise only.
- L11 is the file select input and ‘multiple‘ attribute means you can select multiple images at one time. I also gave it an ID “images” so I can query it easily later.
- L12 is the nonce field generated by WordPress for security reason. Read the codex here if you don’t know what it means.
- L15 will indicate the upload process status information. Initially there is nothing there.
- L17-L19 will contain any image we have uploaded.
Then we’ll need the key function I’ve mentioned in that post.
Also, since we’ll upload multiple images, we should convert the original files array to a better structure in order to match the
upload_user_file function. Here I write it into a function. This is best practice for future use.
Now we define the ajax handler callback.
You see we have defined 2 functions:
wp_ajax_nopriv_upload_images. This is how we implement ajax in WordPress way. Check the codex here.
- L10: we check the nonce is verified before executing forward.
- L12 and L15 is to check the
$_FILESdata is passed and the first image file size is less than 5M (Strictly speaking you should check file size for all images. I am lazy to do this check, leave it to you).
- L20-L37 is the codes for the output of the upload result. If the image is uploaded successfully, return the thumbnail HTML tags.
I am not going into details of it, one thing should get your attention is L33. If you copy and paste the codes, you may not probably get the upload function work. ‘localizedScript.ajaxurl‘ is the variable I localized with
wp_localize_script. You should change it to your own variable.
wp_localize_script( 'ajax', 'localizedScript', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), ) );
This is up to you my friend!