原创

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

        JavaScript实现上传文件,很多网站为了美观提高用户体验度,将其上传控件隐藏,利用button按钮触发它的click事件,实现上传文件功能,此处需要注意的是通过Js上传文件存在浏览器兼容性问题,需在Js中判断用户所使用的浏览器通过不同的手段来完成文件上传,本站素文宅 www.yoodb.com 为大家分享了一种比较实用的利用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>欢迎收藏本站 www.yoodb.com</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表单实现上传文件的简单方法的全部内容,希望大家多多支持素文宅,欢迎收藏本站~

关注下方微信公众号“Java精选”(w_z90110),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

评论

分享:

支付宝

微信