I'm trying to use image upload in my theme's options page and haven't found yet a simple ajax upload script with many tutorials or a good documentation, I just want a simple straightforward script so I just edit the file path and couple other stuff, and of course that works with many uploaders on the page.

I tried plupload but it's complicated for me because I don't know anything about javascript, just a little jQuery understanding.

So are there any simple ajax uploaders with a good tutorial about it?

  • I tried valums file uploader but didn't work, and followed this tutorial krishnakantsharma.com/2012/01/… it works but I don't understand the js file that he wrote. – Pierre Apr 26 '12 at 12:55

I have used the native uploader with great results. Try adding this snippet of JS:

jQuery('#upload_image_button').click(function() {
  formfield = jQuery('#fwpPhoto').attr('name');
  tb_show('', 'media-upload.php?type=image&TB_iframe=true');
  return false;

window.send_to_editor = function(html) {
  imgurl = jQuery('img',html).attr('src');

Then, in your HTML:

<input id="fwpPhoto" name="facultyPhoto" value="">
<input id="upload_image_button" type="button" value="Upload Image">

For Multiple Uploaders

<input id="facultyPhoto-1" name="facultyPhoto-1" value="" class="fwpPhoto">
<input id="upload_image_button-1" class="uploadButton" type="button" value="Upload Image">
<input id="facultyPhoto-2" name="facultyPhoto-2" value="" class="fwpPhoto">
<input id="upload_image_button-2" class="uploadButton" type="button" value="Upload Image">
<input id="facultyPhoto-3" name="facultyPhoto-3" value="" class="fwpPhoto">
<input id="upload_image_button-3" class="uploadButton" type="button" value="Upload Image">
<input id="facultyPhoto-4" name="facultyPhoto-4" value="" class="fwpPhoto">
<input id="upload_image_button-4" class="uploadButton" type="button" value="Upload Image">

<script type="text/javascript">
        var target = '';
        $('.fwpPhoto').each(function(index) {
            var field = index + 1; //because index starts at 0

            jQuery('#upload_image_button-'+field).click(function() {
                formfield = jQuery('#facultyPhoto-'+field).attr('name');
                target = '#'+formfield;
                tb_show('', 'media-upload.php?    type=image&amp;TB_iframe=true');
                return false;
        window.send_to_editor = function(html) {
            imgurl = jQuery('img',html).attr('src');
| improve this answer | |
  • thank you but I tried this method before, and actually that's my problem with this method and other scripts because I need multiple uploaders on my page, and I'm not experienced with javascript so I don't know how to do it. – Pierre Apr 26 '12 at 13:44
  • How many uploaders are you talking about? Will it vary? – Aaron Wagner Apr 26 '12 at 14:10
  • yes I'm trying to make it as dynamic as possible. – Pierre Apr 26 '12 at 14:40
  • I updated my answer. I have tested this, and it works great. Thanks for asking this question, because I have actually been meaning to do something like this in my own themes. – Aaron Wagner Apr 26 '12 at 14:47

have you tried using jquery form plugin http://jquery.malsup.com/form/

It is also included by default in wordpress admin.

| improve this answer | |
  • thank you, it seems that it doesn't need coding skills, I'll try it and see if it works. – Pierre Apr 26 '12 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.