В настоящее время я работаю над одним индикатором выполнения загрузки с HTML5 и Javascript / Ajax.
Итак, вот мой код Javascript:
function _(el){ return document.getElementById(el); } // Submit the upload form function uploadFiles(){ var file = _("upfile_0").files[0]; //alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("upfile_0", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "../file_upload_parser.php"); ajax.send(formdata); return false; if(checkFileNameFormat()){ return false; } if(checkDisallowFileExtensions()){ return false; } if(checkAllowFileExtensions()){ return false; } if(checkNullFileCount()){ return false; } if(checkDuplicateFileCount()){ return false; } var total_uploads = 0; for(var i = 0; i < upload_range; i++){ if(document.form_upload.elements['upfile_' + i].value != ""){ total_uploads++; } } document.getElementById('total_uploads').innerHTML = total_uploads; document.form_upload.submit(); document.getElementById('upload_button').disabled = true; for(var i = 0; i < upload_range; i++){ document.form_upload.elements['upfile_' + i].disabled = true; } } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } function completeHandler(event){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } В этом случае форма НЕ подает данные в действие action action="[var.path_to_upload_script] из элемента формы, НО работает панель выполнения загрузки.
Когда я удаляю return false; из Javascript индикатор выполнения загрузки не отображается, но форма HTML передает данные в сценарий, ссылаясь на его атрибут action .
Поэтому позвольте мне показать вам код моей HTML-формы:
<form name="form_upload" method="post" enctype="multipart/form-data" action="[var.path_to_upload_script]" style="margin: 0px; padding: 0px;"> <noscript><input type="hidden" name="no_script" value="1" /></noscript> <input type="hidden" name="title" value="[var.title]" /> <input type="hidden" name="description" value="[var.description]" /> <input type="hidden" name="tags" value="[var.tags]" /> <input type="hidden" name="location_recorded" value="[var.location_recorded]" /> <input type="hidden" name="allow_comments" value="[var.allow_comments]" /> <input type="hidden" name="allow_embedding" value="[var.allow_embedding]" /> <input type="hidden" name="public_private" value="[var.public_private]" /> <input type="hidden" name="channel" value="[var.channel]" /> <input type="hidden" name="channel_name" value="[var.channel_name]" /> <input type="hidden" name="sub_cat" value="[var.sub_cat]" /> <input type="hidden" name="form_submitted" value="yes" /> <div id="upload_slots"><span class="font5_16"><b>[var.lang_please_upload]</b></span><input type="file" name="upfile_0" id="upfile_0" /></div> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> <noscript><br><input type="reset" name="no_script_reset" value="Reset" /> <input type="submit" name="no_script_submit" value="Upload" /></noscript> </form> <br> <script language="javascript" type="text/javascript"> document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();"> <input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">'); </script>
Мои вопросы:
[var.path_to_upload_script] и отобразить индикатор выполнения загрузки? С другой стороны, когда я тестирую этот код в Opera, он работает, но в Google Chrome говорится, что Upload Aborted …