JQUERY image upload issue

Question

$(document).ready(function () {
            var myUpload = $('#upload_link').upload({
               name: 'image',
               action: '<?=$image_handling_file?>',
               enctype: 'multipart/form-data',
               params: {upload:'Upload'},
               autoSubmit: true,
               onSubmit: function() {
                    $('#upload_status').html('').hide();
                    loadingmessage('Veuillez patienter...', 'show');
               },
               onComplete: function(response) {
                    loadingmessage('', 'hide');
                    response = unescape(response);
                    var response = response.split("|");
                    var responseType = response[0];
                    var responseMsg = response[1];
                    if(responseType=="success"){
                        var current_width = response[2];
                        var current_height = response[3];
                        //display message that the file has been uploaded
                        $('#upload_status').show().html('<p><h2>Veuillez redimensionner votre image ci-dessous, puis cliquez Sauvegarder</h2></p>');
                        //put the image in the appropriate div
                        $('#uploaded_image').html('<img src="images/news/'+responseMsg+'" id="thumbnail" alt="Create headline image" /><center><div style="width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px; margin: 10px; padding: 10px; background: #F4F4F4; border-radius: 10px; moz-border-radius: 10px; border:1px #e5e5e5 solid;"><div style="overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;"><img src="images/news/'+responseMsg+'" id="thumbnail_preview" alt="Thumbnail Preview" /></div></div></center>')
                        //find the image inserted above, and allow it to be cropped
                        $('#uploaded_image').find('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
                        //display the hidden form
                        $('#thumbnail_form').show();
                        $('#upload_par').hide();
                    }else if(responseType=="error"){
                        $('#upload_status').show().html('<h1>Erreur</h1><p>'+responseMsg+'</p>');
                        $('#uploaded_image').html('');
                        $('#thumbnail_form').hide();
                    }else{
                        $('#upload_status').show().html('<h1>Erreur</h1><p>Veuillez réessayer</p>'+response);
                        $('#uploaded_image').html('');
                        $('#thumbnail_form').hide();
                    }
               }
            });
});


<div id="upload_par"><a id="upload_link" href="#"><button type="button" class="btn" style="display:block;">Choisir une image</button></a></div>

What is the problem with my JQUERY?

The Developer's tool on Chrome gives me these error details:

Uncaught TypeError: Object [object Object] has no method 'upload' (anonymous function) f.Callbacks.njquery.js:2

f.Callbacks.o.fireWithjquery.js:2

e.extend.readyjquery.js:2

c.addEventListener.B

jquery doesn't have a .upload() call. That's probably provided by some plugin which you're lacking. — Marc B
– Marc B, Commented Jan 9, 2012 at 18:19
Are your scripts being loaded after jQuery? Does it work in other browsers? — StuR
– StuR, Commented Jan 9, 2012 at 18:24

bardiir · Accepted Answer · 2012-01-09 18:20:08Z

1

There's no function like .upload() in jQuery, you might want to use .submit() instead.

answered Jan 9, 2012 at 18:20

bardiir

14.8k9 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Strudwick Over a year ago

Thanks, you are right, there is no jquery upload function...submit will do the job.

Chandra Sekhar K · Accepted Answer · 2012-02-19 04:58:00Z

0

Indeed as bardiir says, there's no such thing as upload() function. You could use something like this, make it more reusable, the up loader in here is pretty simple and easy to custom. Hope it helps.

The final code just for the loader would be something like:

$('#imageform').bind('submit', function(e) {
            e.preventDefault(); // <-- important
            $(this).ajaxSubmit({
                target: '#preview',
                success: function() {
                $('#file').val($('#newimg').attr("src"));
                }               
            });
        }).submit();

And all the magic can be handled by the ajaxSubmit and a PHP file to make de upload.

edited Feb 19, 2012 at 4:58

Chandra Sekhar K

16.6k11 gold badges71 silver badges91 bronze badges

answered Feb 18, 2012 at 22:35

kcho0

1691 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

JQUERY image upload issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related