gpt4 book ai didi

javascript - 页面上传文件两次?

转载 作者:行者123 更新时间:2023-11-29 16:12:09 25 4
gpt4 key购买 nike

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

我已经设法使用此方法使进度条正常工作:

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 - 页面上传文件两次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24985656/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com