JS实现本地文件选择

最新推荐文章于 2024-11-06 18:05:13 发布

小白逆流而上

最新推荐文章于 2024-11-06 18:05:13 发布

阅读量1.6w

点赞数 5

分类专栏：前端文章标签： js 选择文件

本文链接：https://blog.csdn.net/baidu_39298625/article/details/106189630

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的文件上传功能，通过隐藏的input[type='file']元素触发文件选择对话框，并在用户选择文件后更新页面上的文件名显示。

摘要由CSDN通过智能技术生成

html代码（我的页面用了layui框架，自己实现可简单写写就行）：

<div class="layui-form-item">
    <label class="layui-form-label">文件名:</label>
    <div class="layui-input-block">
       <input type="text" name="title" placeholder="请选择文件" id = "fileNameInput" autocomplete="off" class="layui-input" disabled="disabled" title="不可编辑">
     </div>
</div>
<div class="layui-upload">
     <button type="button" class="layui-btn layui-btn-normal" id="chooseFile" >选择文件</button>
     <button type="button" class="layui-btn" id="fileImport"><span class="glyphicon glyphicon-cloud-upload"></span>文件导入</button>
</div>

JS代码：

        function upload() {
            var inputObj=document.createElement('input')
            inputObj.setAttribute('id','file');
            inputObj.setAttribute('type','file');
            inputObj.setAttribute('name','file');
            inputObj.setAttribute("style",'visibility:hidden');
            document.body.appendChild(inputObj);
            inputObj.value;
            inputObj.click();
            console.log(inputObj);
        } 

        $("#chooseFile").on('click',function(){
            upload();
            document.querySelector('#file').addEventListener('change', e => {
                for (let entry of e.target.files){
                    document.getElementById("fileNameInput").value=entry.name;
                    console.log(entry.name, entry.webkitRelativePath);
                }
            });
        });
         $("#fileImport").on('click',function(){
            //文件上传事件
        });

效果：