Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 6 down vote favorite
1

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
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

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

3 Answers

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
up vote 1 down vote

I am the author of this plugin: http://codecanyon.net/item/real-ajax-uploader-for-wordpress/2251323.
With it, is simple to insert in any wordpress page by short cut. Has administration panel with uploader settings and it is fully based on ajax.

And also the publisher of this free jQuery plugin: AX Ajax Multi Uploader

AX Ajax Multi Uploader is a jQuery javascript plugin for creating a simple multiupload file system for web applications. It is based only on javascript and supports html5 uploading but also is compatible with html4. No flash, no silverlight or other plugins only javascript.

share|improve this answer
1  
From the FAQ: Post good, relevant answers, and if some (but not all) happen to be about your product or website, so be it. However, you must disclose your affiliation in your answers. – brasofilo Jul 19 '12 at 23:26
I cannot understand why this was down votet, Yes it is my product on of which I sell, but just for the idiot that have downvoted my answer also I give this plugin for free as jquery plugin code.google.com/p/ax-jquery-multiuploader, so for the idiots that has downvoted my answer, just try to understand I cannot work for free for all my life... – albanx Jul 20 '12 at 13:53
You don't need to make a drama out of it. Just read the FAQ, put a disclose notice in your Answer, also add the link to the free plugin, and voilà: Up Votes ! – brasofilo Jul 20 '12 at 13:59
Oh, sure, down votes are not attack to your person, they manifest disagreement with the Answer. – brasofilo Jul 20 '12 at 14:02
as far as I know votes here, should not be used for expressing opionion or disagrement, they should express the fact of which answer is more completed and correct for the question, and downvotet should be used when the answer is not answering the question at all or in a wrong way. the questionhere is: ajax uploader for wordpress, and my answer proposed one – albanx Jul 20 '12 at 14:23
show 2 more comments
up vote 0 down vote

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.