JQUERY图片上传问题

时间:2012-01-09 18:17:36

标签: jquery

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

我的JQUERY有什么问题?

Chrome上的开发者工具为我提供了以下错误详情:

  

未捕获TypeError:对象[object Object]没有方法'upload'   (匿名函数)f.Callbacks.njquery.js:2

     

f.Callbacks.o.fireWithjquery.js:2

     

e.extend.readyjquery.js:2

     

c.addEventListener.B

2 个答案:

答案 0 :(得分:1)

jQuery中没有像.upload()这样的功能,您可能想要使用.submit()

答案 1 :(得分:0)

事实上,正如 bardiir 所说,没有upload()功能这样的东西。您可以使用类似this的内容,使其更具可重用性,here中的上传器非常简单且易于自定义。希望它有所帮助。

仅适用于加载程序的最终代码如下:

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

所有的魔力都可以通过 ajaxSubmit 和PHP文件来处理,以进行上传。