1

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

4

1 回答 1

0

未提交原因数据

目前， 的放置return false;导致页面在执行之前退出该功能document.form_upload.submit();。这就是为什么不提交数据的原因。

返回 False 的注意事项

您可能需要将 areturn false;放在函数的末尾，以保持一致性（如果调用函数的某些代码期望这样做和/或如果它与是否提交页面有关）。

函数中可能还有其他一些操作导致进度条失败。您可以尝试在代码中将其向下移动，直到您看到进度条失败——这将揭示是哪一行弄乱了进度条，这将是解决问题的第一步。

我的预期解决方案

我猜测您删除时根本看不到进度条的原因return false;是这正​​是因为正在提交的数据。执行时document.form_upload.submit();，页面将提交，这将导致页面重新加载或加载表单的操作页面。

整体解决方案将取决于您的进度条控件的工作方式，但它可能就像移动document.form_upload.submit();到completeHandler()函数一样简单，因为您不希望页面在上传完成之前提交。

于 2013-11-06T19:09:39.500 回答