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>

页面上传文件两次？

4 个答案: