jquery ajax表单插件只在使用IE6时多次提交给服务器

时间：2022-11-23 18:09:55

I all. I have the following form used to temporarily upload a photo on a j2ee server and then crop it with imageAreaSelect plugin :

我都是。我有以下表格用于临时上传j2ee服务器上的照片，然后使用imageAreaSelect插件裁剪：

<form name="formAvatarName" id="formAvatar" method="post" 
action="../admin/admin-avatar-upload" 
enctype="multipart/form-data">
<label>Upload a Picture of Yourself</label>
<input type="file" name="upload" id="upload" size="20" />
<input type="button" id="formAvatarSubmit" value="formAvatar" onclick="invia()"/> 
</form>

I am using jquery form plugin to do ajax submission, this is my last :) attempt :

我使用jquery表单插件来做ajax提交，这是我的最后一次:)尝试：

var options = { 
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse,  // post-submit callback 
    dataType:  'text/html' 
}; 

   $('#formAvatar').unbind('submit').bind('submit', function() {
     alert('aho');
        $(this).ajaxSubmit(options);
        return false;
   });

Here below the javascript functions used as submit event handlers:

下面是用作提交事件处理程序的javascript函数：

    function showRequest(formData, jqForm, options) { 
        var queryString = $.param(formData); 
        log.debug('About to submit: \n\n' + queryString); 
        return true; 
    } 

    function showResponse(responseText, statusText, xhr, $form)  { 
        myRes=responseText; 
        log.debug('status: ' + statusText + '\n\nresponseText: \n' + responseText); 


        //box uploaded
        $('div#avatar-upl > img').replaceWith(myRes);
        var origWidth = $('div#avatar-upl > img').width();
        var origHeight = $('div#avatar-upl > img').height();
        log.debug('AjaxUpload onComplete(): orig size w,h : ' + origWidth + ', ' + origHeight);

        //scaling uploaded
        $('div#avatar-upl > img').jScale(
                {ls:'300px'}, 
        function(){
                var scaleWidth = $(this).width();
                var scaleHeight = $(this).height();
                log.debug('AjaxUpload onComplete(): scaled size w,h : ' + scaleWidth + ', ' + scaleHeight);
                //put scaled sizes on img custom attribute, to be retrieved from preview() method
            $('div#avatar-upl > img').attr('scaleWidth', scaleWidth);
                $('div#avatar-upl > img').attr('scaleHeight', scaleHeight);
            }
        );

        //box thumbnail
        $('div#avatar-thumb > img').replaceWith(myRes);
        $('div#avatar-thumb > img').css({
        width: 100,
        height: 100
    });

    //setup of imgAreaSelect
    $('div#avatar-upl > img').imgAreaSelect({ 
        handles: true, 
        onSelectEnd: avatarPreview
    }); 
}

This is the html :

这是html：

<div id="avatar-mng">
    <div id="avatar-upl">
        <img id="img-upl" style="margin: 0 0.3em;" src="../res/img/spacer.gif" />
    </div>  

    <div id="avatar-thumb" style="width: 100px; height: 100px; overflow: hidden; float:right;">
        <img id="img-thumb" src="../res/img/spacer.gif" style="width: 100px; height: 100px;" />
    </div>
    <form name="formAvatarName" id="formAvatar" method="post" action="../admin/admin-avatar-upload" enctype="multipart/form-data">
        <label>Upload a Picture of Yourself</label>
        <input type="file" name="upload" id="upload" size="20" />
        <input type="button" id="formAvatarSubmit" value="formAvatar" onclick="invia()"/> 
    </form>
</div>

Only when tested with IE6 I can see that the sumbission to the server is done multiple times (first time I got the uploaded file, the other times the sumbmission seems empty and I got error). With IE7, IE8, FFOX, CHROME is working fine.

只有在使用IE6测试时，我才能看到服务器的总和已经多次完成（第一次我获得了上传的文件，其他时候sumbmission似乎是空的，我得到了错误）。随着IE7，IE8，FFOX，CHROME工作正常。

Any Ideas? Many thank in advance!

有任何想法吗？非常感谢！

1 个解决方案

#1

0  

It seems very likely that you're not getting as far as return false -- thus IE goes ahead and submits the form in the "natural" way, as well as by ajaxSubmit(). Your options specify a success callback. What does showResponse() look like? Perhaps something in showResponse() is tripping up IE so that it fails to run return false. I'd start by trying your code without the success callback, and going from there.

看起来很可能你没有得到返回false - 因此IE继续以“自然”方式提交表单，以及ajaxSubmit（）。您的选项指定成功回调。 showResponse（）看起来像什么？也许showResponse（）中的某些内容正在绊倒IE，因此无法运行返回false。我首先尝试没有成功回调的代码，然后从那里开始。

#1

0  

It seems very likely that you're not getting as far as return false -- thus IE goes ahead and submits the form in the "natural" way, as well as by ajaxSubmit(). Your options specify a success callback. What does showResponse() look like? Perhaps something in showResponse() is tripping up IE so that it fails to run return false. I'd start by trying your code without the success callback, and going from there.

看起来很可能你没有得到返回false - 因此IE继续以“自然”方式提交表单，以及ajaxSubmit（）。您的选项指定成功回调。 showResponse（）看起来像什么？也许showResponse（）中的某些内容正在绊倒IE，因此无法运行返回false。我首先尝试没有成功回调的代码，然后从那里开始。

标签：

相关文章