页面上传文件两次 - Page uploads file twice?

我正在尝试将上传进度条合并到我的页面。

我已经设法让进度条工作使用这个方法:

http://www.developphp.com/view.php?tid=1351。

当用户单击上载文件时，进度条执行任务并显示上传了多少以及何时完成。

然而，当用户随后提交表单时，文件似乎再次上传(chrome在屏幕左下角显示文件上传信息)。

我怎样才能避免呢?另外，我怎么能得到它，所以我没有上传文件按钮?

所有我想要的是提交按钮，进度条显示的进度，然后去一个不同的页面一旦上传完成(通过一些php它需要做什么与POST信息)?

我的相关代码如下…

<form method="post" action="../../assets/php/actiontest.php" name='mainForm' enctype="multipart/form-data" OnSubmit="return CheckForm()">
    <input type="text" name="Customer" placeholder="Customer" required/><br/>
    <input type="file" name="file1" id="file1"><br/>
    <input type="button" value="Upload File" onclick="uploadFile()" />
    <progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
    <input type="submit" id="submit" />     
</form> 
<script type="text/javascript">
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    //ajax.open("POST", "file_upload_parser.php");
    ajax.open("POST", "../../assets/php/actiontest.php");
    ajax.send(formdata);
}
function progressHandler(event){
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
}
function completeHandler(event){
    _("progressBar").value = 0;
}
</script>

由于您有一个文件输入字段，因此在提交表单时，它将获取表单中的值并上传它。在多个浏览器支持下重置文件字段是一件痛苦的事情。

你可以尝试这样做:

文件上传结束后，将元素从DOM中移除显示重置链接。
如果用户想上传另一个文件，他点击这个链接然后再次引入文件输入字段。

显然，因为您首先使用javascript上传它，然后在提交表单时作为普通表单发布。尝试在javascript上传成功后清除和删除文件输入，以防止它再次上传，甚至可能自动提交表单，这样用户就不必手动完成了。试试这个:

<form method="post" action="../../assets/php/actiontest.php" name="mainForm" name="mainForm" enctype="multipart/form-data" OnSubmit="return CheckForm()">
<input type="text" name="Customer" placeholder="Customer" required/><br>
<input type="file" name="file1" id="file1"><br>
<input type="button" id="uploadButton" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
<input type="submit" id="submit" />     
</form> 
<script type="text/javascript">
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var file = _("file1").files[0];
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  //ajax.open("POST", "file_upload_parser.php");
  ajax.open("POST", "../../assets/php/actiontest.php");
  ajax.send(formdata);
}
function progressHandler(event){
  var percent = (event.loaded / event.total) * 100,
      file = _("file1"),
      uploadButton = _("uploadButton"),
      mainForm = _("mainForm");
  _("progressBar").value = Math.round(percent);
  if(percent == 100) {
    file.remove();
    uploadButton.remove();
    mainForm.submit();
  }
}
function completeHandler(event){
  _("progressBar").value = 0;
}
</script>

一种更好的方法可能是同时上传文件和，使用javascript发送其余的表单数据，并简单地跳过整个提交阶段。

您需要将文件输入从表单标记中取出，编写自定义表单提交脚本，或者在单击提交按钮时将文件字段设置为禁用，后者可能是最好的选择

好了，我是这样解决这个问题的。我删除了表单提交按钮，并将所有表单值传递给FormData，然后将所有POST信息发送到我的PHP脚本，PHP脚本处理将其转换为PDF。

这样，在点击上传文件按钮后，进度条会显示所有正在上传的表单的进度，而不仅仅是照片。

<script type="text/javascript">
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var form = _("form1"); 
  var file = _("file1").files[0];
  var formdata = new FormData(form);
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  //ajax.open("POST", "file_upload_parser.php");
  ajax.open("POST", "../../assets/php/actiontest.php", true);
  ajax.send(formdata);
}
function progressHandler(event){
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
}
function completeHandler(event){
  _("progressBar").value = 0;
}
</script>
<form method="post" action="actiontest.php" id="form1" name='mainForm' enctype="multipart/form-data" OnSubmit="return CheckForm()">
<input type="text" id="Customer "name="Customer" placeholder="Customer" required/><br>
<input type="file" name="file1" id="file1"><br> 
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
</form>