Привет, я работаю над индикатором выполнения загрузки.
Вот мой код Javascript:
<script> /* Script written by Adam Khoury @ DevelopPHP.com */ /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */ function _(el){ return document.getElementById(el); } function uploadFile(){ 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); } 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"; } </script> Вот моя форма 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> <p id="status"></p> <p id="loaded_n_total"></p> <input type="submit" value="Upload File" onclick="uploadFile()"> </form>
Когда я нажимаю кнопку отправки, я получаю сообщение об ошибке «Upload Upload Aborted»
Если я сделаю свой тип ввода от «submit» до «кнопки», индикатор выполнения загрузки работает, но не подчиняется форме. Если я сделаю свой тип ввода с «кнопки», чтобы «отправить», индикатор выполнения загрузки НЕ работает, но форма отправки подчиняется.
Итак, как я могу сделать индикатор выполнения загрузки и подачу формы вместе?
Заранее спасибо!
В дополнение к моему комментарию. uploadFile() не препятствует отправке формы. Использовать return false; чтобы предотвратить распространение события.
function uploadFile(){ 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; //Don't continue with the regular form submission }