我目前正在与HTML5和JavaScript / AJAX一个上载进度条。

I am currently working on one upload progress bar with HTML5 and Javascript/Ajax.

因此​​，这里是我的javascript code：

So here is my Javascript code:

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";
}

在这种情况下，形式不submithing数据，以行动指针行动=[var.path_to_upload_script] 从表单元素，但在上传进度条的工作。

In this case the form is NOT submithing data to action pointer action="[var.path_to_upload_script] from the form element BUT the Upload Progress bar is working.

当我删除返回false; 从Javascript的上传进度栏没有显示，但是HTML表单提交的数据来提及其动作属性。

When I remove return false; from the Javascript the upload progress bar is not showing, but the HTML form is submitting data to the script referred to its action attribute.

因此​​，让我告诉你我的HTML表单的code：

So let me show you the code of my HTML form:

    <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" />&nbsp;&nbsp;&nbsp;<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();">&nbsp;&nbsp;&nbsp;<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">');
    </script>

我的问题是：

My questions are:

在我测试这个code。在歌剧它的工作原理另一方面​​，但谷歌浏览器，它说上传已中止 ...

On other hand when I test this code in Opera it works, but it Google Chrome it says Upload Aborted...

推荐答案

目前，安置的返回false; 导致页面退出函数之前 document.form_upload.submit（）; 执行。这就是为什么数据不会提交

Reason Data Is Not Submitted

Currently, the placement of return false; is causing the page to exit the function before document.form_upload.submit(); executes. That is why the data is not submitted.

您可能需要把返回false; 在函数结束时保持一致（如果预计约code，它被调用功能和/或如果它被扎成的页是否已提交）。

You may need to put a return false; at the end of the function, to maintain consistency (if that is expected by some code that is calling the function and/or if it is tied into whether or not the page is submitted).

此外，还可以在功能上的一些其他操作是导致进度条失败。你可以尝试，直到你看到进度条无法向下移动可以在code - 这将揭示了什么线搞乱了进度条，这将是解决问题的第一步。

There may also be some other action in the function that is causing the progress bar to fail. You can experiment with moving it down in the code until you see the progress bar fail -- That will reveal what line is messing up the progress bar, which will be the first step on solving the problem.

我的猜测，你没有看到进度条，当你删除所有返回false的原因; 是，它是precisely ，因为提交。当 document.form_upload.submit（）; 执行时，页面会提交，这将导致在任何一个页面重载或装载表单的动作页。

My guess as to the reason you do not see the progress bar at all when you remove return false; is that it is precisely because of the data being submitted. When document.form_upload.submit(); executes, the page will submit, which would result in either a page reload or loading of the form's action page.

的整体解决方案将取决于有点如何进度条控件的作品，但它可能是简单的移动 document.form_upload.submit（）; 到在completeHandler（）的功能，因为你不想让页面提交，直到后上传完成。

The overall solution will depend a bit on how your progress bar control works, but it may be as simple as moving document.form_upload.submit(); into the completeHandler() function, as you do not want the page to submit until after the upload is complete.