Показать маску прогресса при отправке HTML-формы и загрузке файла

Я новичок в javascript и HTML. Я работаю над отображением загруженного изображения, в то время как моя html-форма отправляется обратно и загружает файл. Я использую плагин http://malsup.com/jquery/form/#options-object. Я использую IE 9. Я отправляю форму и взамен получаю файл.Показать маску прогресса при отправке HTML-формы и загрузке файла

Когда я отправляю сообщение назад, я вижу загруженную маску, затем IE прошу меня сохранить файл, но маска не исчезнет. Никакой успех/обратный вызов ошибки не вызван. Ниже приведен снимок моего кода.

Высоко цените ваше руководство в разрешении этого вопроса.

`frmExport.html 
<head> 
<script src="js/jquery-1.8.0.js"></script> 

<script src="js/jquery.form.js"></script> 

<script src="js/frmExport.js"></script> 
</head> 
<body onload="......"> 
<form id="frmExport" onsubmit="return exportFile();" enctype="multipart/form-data" method="post"> 
<fieldset> 
<legend class="cuesGroupBoxTitle">Export File</legend> 
    <table border="0" cellpadding="0" cellspacing="8"> 
     <tr> 
     <td width="50%">Export File:</td> 
     <td><input type="submit" id="ExportFileButton" value="Export" /></td> 
     </tr> 
    </table> 
</fieldset> 
</form> 
</body> 

frmExport.js 

function exportSuccess(responseText, statusText, xhr, $form) 
{ 
hideMask("exportFile"); 
alert(statusText"); 
} 

function exportError() 
{ 
hideMask("exportFile"); 
alert("An error occurred while exporting file."); 
} 

function exportFile() 
{ 
if(confirm("Exporting file may take sometime. Do you want to continue?")) 
{ 
    var options = 
    { 
     type:   "POST", 
     success:  exportSuccess, // post-submit callback 
     error:   exportError, 
     url:   'exportURI', 
     dataType:  'text' 
    }; 

    // bind to the form's submit event 
    $('#frmExport').submit(function() 
    { 
     $(this).ajaxSubmit(options); 

     showMask("exportFile"); 

     //always return false 
     return false; 
    }); 
} 
}`

источник

2013-08-10 Jignesh

1. удалили onsubmit из тега формы 2. изменила '<тип входного = "представить" идентификатор = значение "ExportFileButton"= "Экспорт" OnClick = "возвращение Exportfile();"/>' Теперь мой callback вызова получает вызов, но IE не просит Save As file. – Jignesh

Я уверен, что ваша проблема в том, что вы зацепить представить событие ($('#frmExport').submit(...)), когда представить уже запущен. Попробуйте подключить его к документу.

$(document).ready(function() { 
var options = 
{ 
    type:   "POST", 
    success:  exportSuccess, // post-submit callback 
    error:   exportError, 
    url:   'exportURI', 
    dataType:  'text' 
}; 

// bind to the form's submit event 
$('#frmExport').submit(function() 
{ 
    $(this).ajaxSubmit(options); 

    showMask("exportFile"); 

    //always return false 
    return false; 
}); 

});

источник

2013-08-10 20:29:24

У меня есть и другие формы на странице HTML. Где я должен это писать? В разделе HEAD? – Jignesh

Функция $ (document) .ready ожидает, что ваша страница будет полностью загружена до ее вызова, поэтому вы можете поместить ее в раздел HEAD, но вы также можете поместить ее в другое место, соответствующее вашим потребностям, и оно все равно будет вызвано в нужное время. –

Это не помогает. Я не уверен, что я делаю что-то неправильно. Я скопировал его в главный раздел. Я перезагрузил страницу и дал мне подтверждение. – Jignesh

Показать маску прогресса при отправке HTML-формы и загрузке файла

ответ

Смежные вопросы