Javascript和AJAX发布方法

Question

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

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

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.

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.

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:

• where is my mistake in this Javascript
• how i can make it post the data to [var.path_to_upload_script] and show up the upload progress bar?

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

Answer 1

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.

Notes on Return False

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).

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.

My Expected Solution

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.

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.