Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

migrated from stackoverflow.com Apr 26 '12 at 12:58

This question came from our site for professional and enthusiast programmers.

    
What have you tried? –  shanabus Apr 26 '12 at 12:51
    
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. –  Peter Apr 26 '12 at 12:55

2 Answers 2

up vote 4 down vote accepted

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');
  jQuery('#fwpPhoto').val(imgurl);
  tb_remove();
}

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">
    jQuery(document).ready(function($){
        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');
            jQuery(target).val(imgurl);
            tb_remove();
        }
    });
</script>
share|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. –  Peter 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. –  Peter 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
    
thank you very much I'll try it. –  Peter Apr 26 '12 at 14:58

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

It is also included by default in wordpress admin.

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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