HTML5和Javascript上传进度条 [英] HTML5 and Javascript Upload progress bar

问题描述

这里是我的Javascript代码：

 <脚本> 
 / *由Adam Khoury编写的脚本@ DevelopPHP.com * / 
 / *视频教程：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）; 
 _（状态）。innerHTML = Math.round（百分比）+上传的％...请稍候; 
} 
 function completeHandler（event）{
 _（status）。innerHTML = event.target.responseText; 
 _（progressBar）.value = 0; 
} 
函数errorHandler（event）{
 _（status）。innerHTML =Upload Failed; 
} 
函数abortHandler（event）{
 _（status）。innerHTML =Upload Aborted; 
} 
< / script> 
  

这是我的HTML表单：

 < form name =form_uploadmethod =postenctype =multipart / form-dataaction =[var.path_to_upload_script]style =margin：0px; padding：0px ;> 
< noscript>< input type =hiddenname =no_scriptvalue =1/>< / noscript> 
< input type =hiddenname =titlevalue =[var.title]/> 
< input type =hiddenname =descriptionvalue =[var.description]/> 
< input type =hiddenname =tagsvalue =[var.tags]/> 
< input type =hiddenname =location_recordedvalue =[var.location_recorded]/> 
< input type =hiddenname =allow_commentsvalue =[var.allow_comments]/> 
< input type =hiddenname =allow_embeddingvalue =[var.allow_embedding]/> 
< input type =hiddenname =public_privatevalue =[var.public_private]/> 
< input type =hiddenname =channelvalue =[var.channel]/> 
< input type =hiddenname =channel_namevalue =[var.channel_name]/> 
< input type =hiddenname =sub_catvalue =[var.sub_cat]/> 
< input type =hiddenname =form_submittedvalue =yes/> 
 
< div id =upload_slots>< span class =font5_16>< b> [var.lang_please_upload]< / b>< / span>< input type =filename =upfile_0id =upfile_0/>< / div> 
< progress id =progressBarvalue =0max =100style =width：300px;>< / progress> 
< p id =status>< / p> 
< p id =loaded_n_total>< / p> 
< input type =submitvalue =Upload Fileonclick =uploadFile（）> 
< / form> 
  

当我按下提交按钮时，我收到一个错误上传已上传

如果我将输入类型从提交改为按钮，则上传进度条可以正常工作，但不能修改表单。
如果我将输入类型从按钮设置为提交，上传进度条不起作用，但提交表单正在进行子打算。

提前致谢！

可以让上传进度条和提交表单一起工作吗？解决方案

继续我的评论。 uploadFile（）不会阻止表单提交。
使用返回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）; 
返回false; //不要继续进行常规表单提交
} 
  

Hi there i am working on upload progress bar.

Here is my Javascript code:

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

Here is 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>
      <p id="status"></p>
      <p id="loaded_n_total"></p>
    <input type="submit" value="Upload File" onclick="uploadFile()">
    </form>

When i press the submit button i get an error "Upload Upload Aborted"

If i make my input type from "submit" to "button" the upload progress bar is working, but not submithing the form. If i make my input type from "button" to "submit" the upload progress bar is NOT working but the submit form is submithing.

So how i can make the upload progress bar and the submiting of the form work together?

Thanks in advance!

解决方案

Further to my comment. uploadFile() isn't preventing the form from submitting. Use return false; to prevent the event from propagating.

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
}    

这篇关于HTML5和Javascript上传进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！