JQuery плагин формы AJAX отправить на сервер несколько раз только при использовании IE6 - PullRequest
Новая
       12

JQuery плагин формы AJAX отправить на сервер несколько раз только при использовании IE6

0 голосов
/ 20 мая 2010

Я все.У меня есть следующая форма, используемая для временной загрузки фотографии на сервер 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>

Я использую плагин формы 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;
   });

Здесь ниже функции 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
    }); 
}

Это 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>

Только при тестировании с IE6 IМожно видеть, что передача на сервер выполняется несколько раз (первый раз, когда я получил загруженный файл, в другой раз, когда разрешение кажется пустым, и я получил ошибку).С IE7, IE8, FFOX, CHROME работает нормально.

Есть идеи?Большое спасибо заранее!

1 Ответ

0 голосов
/ 21 мая 2010

Кажется очень вероятным, что вы не достигаете return false - таким образом, IE идет вперед и отправляет форму "естественным" способом, а также ajaxSubmit(). Ваш options указывает success обратный вызов. Как выглядит showResponse()? Возможно, что-то в showResponse () отключает IE, так что он не запускается return false. Я бы начал с того, что попробовал ваш код без обратного вызова, и пошел бы оттуда.

...