JS实现本地文件选择

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(){//文件上传事件});

效果：

参考博客与问答：

https://ask.csdn.net/questions/683933

https://blog.csdn.net/A350204530/article/details/80049129

JS实现本地文件选择相关推荐

JS学习--用JS读取本地文件
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
js 获取本地文件及目录方法
相册广场游戏登录注册关注此空间听风居感受自然感受生活感受心灵 2012-01-09 14:25 JS读取本地文件及目录的方法 Javascript是网页制作中离不开的脚本语言,依靠它,一个 ...
js读写php文件,h5+js实现本地文件读取和写入
这次给大家带来h5+js实现本地文件读取和写入,h5+js实现本地文件读取和写入的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下: 读取本地文件 Document //点击导入按钮,使fi ...
前端通过spark-md5.js计算本地文件md5
背景: 说到本人第一次使用spark-md5.js还是差不多一年以前的时候了,当时后台老大说要搞一个文件分片上传的功能.我当时就心想:what?啥是文件分片上传,完全没听过好吗? 至于我当时内心那个慌 ...
js 读取本地文件到服务器,在没有Web服务器的情况下使用Javascript加载本地文件...
我需要编写一个使用HTML5和canvas的软件. 整个软件应该能够在本地运行,而不需要服务器.所以我只能使用Javascript,不能使用php. 困难的部分:我必须动态获取操作期间所需的文本文件的 ...
html5加js实现本地文件读取和写入并获取本地文件路径
HTML5提供了一台API可以实现文件的读写,文件读取利用API是FileReader 代码如下: 读取本地文件 <!doctype html> <html lang="e ...
js打开本地文件_JS逆向|高频问题:为何Reres插件总是替换本地文件失败?
最近总被问到,使用Reres插件,总是替换失败,不知道原因在哪里,我已经回答过很多遍了,照着github 上面的教程来就不会错,不可能替换不成功.github地址如下: https://github. ...
Node.js 删除本地文件/文件夹
Node.js功能模块简介如下: fs.promises => 异步操作文件 fs.stat => 判断是文件还是文件夹 fs.unlink => 删除文件 fs.readdir ...
js读取本地文件和写入本地文件
读取本地文件: <!doctype html> <html lang="en"> <head><meta charset="UT ...
js调用文件服务器出现跨域,js 读取本地文件遇到ajax跨域问题
环境:win10 语言:js 对象:easyUI SKD demo 级别:小小白级本篇博文记录博主从js小小白的进化历程,下述问题对老鸟来说再简单不过,但是作为新手一定会经历这样的阶段,所以还是分享 ...

JS实现本地文件选择

JS实现本地文件选择相关推荐

最新文章

热门文章