【代码片段】【HTML】弹出对话框点选加载文件

同学小张

已于 2024-01-02 10:34:44 修改

阅读量473

点赞数

分类专栏： html 代码片段文章标签： html 前端 javascript

于 2022-12-07 20:44:53 首次发布

本文链接：https://blog.csdn.net/Attitude93/article/details/128226611

版权

代码片段同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

【代码片段】【HTML】弹出对话框点选加载文件

<!DOCTYPE html>  
<html>
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>T</title>  
    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>  
</head>  
 
<body>  
    <button id="openFileBtn" class="btn" onclick="selectAndOpenFile()">加载文件</button>
    <input type="file" name="pic" id="f" style="display: none;" onchange="selectFile(this.files)"/>
    <script type="text/javascript"> 
        
        function selectAndOpenFile()
        {
            var f = document.getElementById('f');
            f.click();
        }

        function selectFile(files)
        {
            if (!files.length)  {
                return;
            }
            var file = files[0];
            console.log(files);
            curFile = file;
            console.log(curFile);
        }
        
    </script>  
</body>  
</html>