js 上传文件的文件名怎么清空
1、第一步:js上传分为异步上传和同步上传,其在实现上同步上传直接submit提交文本框到后台进行处理,此时不管是否回到原页面那么也就没有,清楚上传文件在原页面的文本框中的名称了。
上传文件不管是同步还是异步,form表单的属性enctype="multipart/form-data"和提交方式不能改变 method="post"
<form id="upload" enctype="multipart/form-data" method="post">

2、第二步:编辑前端上传文件的代码,具体代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="upload" enctype="multipart/form-data" method="post">
<input type="file" name="file" id="pic"/>
<input type="button" value="提交" onclick="uploadPic();"/>
<span class="showUrl"></span>
<img src="" class="showPic" alt="">
</form>
<script>
function uploadPic() {
var form = document.getElementById('upload'),
formData = new FormData(form);
$.ajax({
url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload",
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(res){
if(res){
alert("上传成功!");
document.getElementById("pic").value="";
}
console.log(res);
$("#pic").val("");
$(".showUrl").html(res);
$(".showPic").attr("src",res);
},
error:function(err){
alert("网络连接失败,稍后重试",err);
}
})
}
</script>
</body>
</html>

3、第三步:测试编辑的代码打开网页--选择上传的文件将--》在谷歌控制台上测试功能关键代码:document.getElementById("pic").value="";测试表明其可以将文本框<input type="file" name="file" id="pic"/>清空,测试成功。




4、第四步:重点补充一下,异步上传的知识,依赖于jquery 的异步上传依赖于
jquery.form.js和jquery.min.js。本次重点说明回调清楚原表单中文件框中内容。
