页面上传文件两次？

Question

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

我已经设法使用这种方法使进度条正常工作：

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>

Answer 1

由于您有一个文件输入字段，当提交表单时，它将获取表单中的值并上传。重置具有多浏览器支持的文件字段很痛苦。

你可以试试这样的：

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

Answer 2

显然，由于您首先使用 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发送其余的表单数据，并简单地跳过整个提交阶段。只需在成功时使用 javascript 重定向用户。

Answer 3

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

Answer 4

好的，这就是我最终解决问题的方法。我删除了表单提交按钮并将所有表单值传递给 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>