Отложить отправку формы загрузки файла до ее проверки

Возможный дубликат:
Приостановить отправку формы для проверки

Это продолжение этого сообщения. Итак, в основном я загружаю файл в iframe. Но перед отправкой я беру данные из формы и с помощью встроенной системы django проверяю их достоверность (в настоящее время это просто фиктивная функция, которая принимает foo: bar и возвращает json result = "true" ). Я использую две кнопки — видимая подделка, которая вызывает проверку, и вторая — скрытая, которая отправляет форму. С помощью приведенного ниже кода я могу выполнить проверку, а затем, когда результат будет положительным, будет отправлена ​​форма. Теперь, если я жестко запрограммирую цель для формы, мое предупреждение не отображается, и я почти уверен, что загрузка не выполняется (к сожалению, список загрузок обновляется каждые 8 ​​часов, поэтому я узнаю, сработало ли это через некоторое время). Если цель не указана, файл загружается с перенаправлением, поэтому весь прослушиватель события «отправить» опускается. Более того, весь код вообще не работает в Chrome. И это занимает около 2-3 секунд (смотря на firebug) между получением ответа от проверки и его отображением, чего я никогда раньше не видел. Я действительно отчаянно пытаюсь заставить его работать, так как я уже потратил впустую 2 дня и без каких-либо результатов.

Образец ссылки:

http://ntt.vipserv.org/artifact/

JS:

<script>  
    $('#fake_upload_submit').click(function(e){
        e.preventDefault();

        var fileUploadForm = document.getElementById('file_upload_form');
        fileUploadForm.addEventListener("submit", function() {
            alert("sent in iframe");
            fileUploadForm.target = 'upload_target';
        }, false);       

        $.ajax({
            type: "POST",
            url: '/artifact/upload/check-form/',
            data: 'foo=bar',
            dataType: "json",
            success: function(data){
                if(data['result'] == "true"){
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);

                    fileUploadForm.submit();

                }
                else{
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span">Response false</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);                    
                    return false;
                }
            }
        });
        return false;        
    });   
</script>

HTML:

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;">
</div>
<h1>Submit</h1>
<form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data">
    {% render_upload_data upload_data %}
    <table>{{ form }}</table>    
    <p>
        <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" >
    </p>
    <p>
        <input type="submit" style="display:none" id="true_upload_submit" value="Submit" />
    </p>    
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
    <p>
        <input type="submit" id="fake_upload_submit" value="Submit" />
    </p>

РЕДАКТИРОВАТЬ:

Отладчик IE показывает Object doesn't support this property or method для:

    fileUploadForm.addEventListener("submit", function() {
        alert("sent in iframe");
        fileUploadForm.target = 'upload_target';
    }, false);

из-за использования addEventListener, но ошибок больше нет. Firebug чистый. В Хроме:

"Не удалось загрузить ресурс" в форме проверки. Это интересно, так как результат в .../check-form/:

{
message: "Response = True"
result: "true"
}

так мне кажется нормально. Пробовал также data.message вместо data["message"], но ничего не меняется.


person mastodon    schedule 18.11.2010    source источник


Ответы (2)


Возможно, это немного раздражающее решение, но в этом и заключается радость работы с Javascript. Оставьте связь между браузером и сервером полностью на Javascript, а не на HTML. Значение:

  • Когда вы пишете свой HTML, опустите действие; измените кнопки отправки на обычные кнопки.
  • Запустите проверку через ajax (как это делается сейчас), и если проверка прошла успешно, вызовите новую функцию, которая будет управлять отправкой формы.
  • Эта функция отправки формы отобразит нужное вам сообщение, после чего добавит действие в форму и запустит form.submit();

Надеюсь это поможет

person Yishai Landau    schedule 18.11.2010
comment
Сделал это по-вашему сейчас. Все еще не работает в хроме вообще. Но я почти уверен, что теперь это работает в ff. - person mastodon; 18.11.2010

Слушай, тебе не обязательно использовать fileUploadForm.addEventListener("submit", function (){...}, false). Это именно то, что делает $(fileUploadForm).submit(function (){...}), и его преимущество заключается в том, что он работает во всех браузерах.

person Jordan Reiter    schedule 22.11.2010