js 上传文件的文件名怎么清空

2025-12-08 19:47:22

1、第一步:js上传分为异步上传和同步上传,其在实现上同步上传直接submit提交文本框到后台进行处理,此时不管是否回到原页面那么也就没有,清楚上传文件在原页面的文本框中的名称了。

上传文件不管是同步还是异步,form表单的属性enctype="multipart/form-data"和提交方式不能改变 method="post"

<form id="upload" enctype="multipart/form-data" method="post"> 

js 上传文件的文件名怎么清空

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>

js 上传文件的文件名怎么清空

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

js 上传文件的文件名怎么清空

js 上传文件的文件名怎么清空

js 上传文件的文件名怎么清空

js 上传文件的文件名怎么清空

4、第四步:重点补充一下,异步上传的知识,依赖于jquery 的异步上传依赖于

jquery.form.js和jquery.min.js。本次重点说明回调清楚原表单中文件框中内容。

js 上传文件的文件名怎么清空

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢