WEB前端

Js提交From表单实现上传文件的简单方法

位置:首页 > WEB前端 > js教程,2018-08-14 11:04
JavaScript实现上传文件,很多网站为了美观提高用户体验度,将其上传控件隐藏,利用button按钮触发它的click事件,实现上传文件功能,此处需要注意的

   JavaScript实现上传文件,很多网站为了美观提高用户体验度,将其上传控件隐藏,利用button按钮触发它的click事件,实现上传文件功能,此处需要注意的是通过Js上传文件存在浏览器兼容性问题,需在Js中判断用户所使用的浏览器通过不同的手段来完成文件上传。


通过Js来完成From表单上传文件,废话多说具体代码如下:

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Js提交From表单实现上传文件的简单方法</title>
 <script type="text/javascript">
function openBrowse(){ 
    var ie = navigator.appName=="Microsoft Internet Explorer" ? true : false; 
    if(ie){ 
        document.getElementById("file").click(); 
        document.getElementById("filename").value = document.getElementById("file").value;
    }else{
        var a = document.createEvent("MouseEvents");
        a.initEvent("click", true, true);  
        document.getElementById("file").dispatchEvent(a); 
    } 
} 
 </script>
 </head>
 <body>
 <form id="form" name="form" enctype="multipart/form-data" method="post" action="yoodb.com"> 
<input type="file" id="file"name="file" style="display:none"/> 
<input type="button" name="button" value="上传文件" onclick="javascript:openBrowse();" />
<input type="text" id="filename" placeholder="IE需文件名"/> 
</form> 
 </body>
</html>

以上代码就是本站为大家分享的Js提交From表单实现上传文件的简单方法的全部内容

TAGS:Js提交表单

猜你喜欢

NewHot