JS input[type=file]读取本地文件（读取json文件）

这里从添加input元素开始做起，如果不用添加的话，直接从绑定onchang事件开始就可以了

// 创建input元素
let input_element = document.createElement('input');
// 设置input元素属性
input_element.id = "josnFile_input";
input_element.type = "file";// 获取要添加元素的父元素dom
let input_box = getComponentObject('baseRectanglekf36e9');
// 给父元素添加子元素（将input元素添加到父元素里面）
input_box.$el.appendChild(input_element);
// 如果没有父元素，可以直接添加到页面，上面两步骤就不需要了
// document.appendChild(input_element);
// 添加 change 事件监听，change后获取选择的本地文件内容，这里一定要放在 appendChild 后面，否则的会报错
document.getElementById('josnFile_input').onchange = function getFileContent() {let file_obj = document.getElementById("josnFile_input");if (file_obj.value == "") {alert("请选择需要上传的文件");return;}// 新建一个FileReaderlet reader = new FileReader();// 读取文件(以纯文本的形式返回文件内容)reader.readAsText(file_obj.files[0], "UTF-8");reader.onload = function (e) {// 文件内容字符串let file_string = e.target.result;console.log(8888, file_string);}// 移除添加的 input 元素// document.getElementById("josnFile_input").remove();
}

JS input[type=file]读取本地文件（读取json文件）相关推荐

js input type file onchange
js input type file onchange addEventListener函数 <input type="file" accept="image/*& ...
input type=file accept中可以限制的文件类型
在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...
html file 隐藏,input type=file /浏览时只显示指定文件类型（html5新特性）
type="file" />浏览时只显示指定文件类型 accept属性列表 1.accept="application/msexcel" 2.accept ...
input[type=file]如何屏蔽“未选择任何文件”
在input中file文件类型是用来选择上传文件用的,但是这个文件选择框有个提示信息--未选择任何文件,甚至还可能不显示自己设置的提示信息,并且还可能点击空白地方(设置透明的opacity: 0;), ...
HTML，input type=“file“获取文件名、文件大小、文件类型
HTML代码 <input type="file" id="deviceFile"> 获取文件名.文件大小.文件类型 $('#deviceFile' ...
＜input type=“file“＞实现上传文件
嗨害嗨,我又来了奥.今天讲一个项目中常见的例子,就是利用input type="file"来进行表单上传文件.首先,我们写好html,如下. <form id="f ...
Android webview Input type=file 文件上传解决方法
默认的情况下在HTML中写 <input type=file /> 的时候回弹出选择文件的窗口,但实际上在webview中默认的是不弹出窗口的解决方法在WebChromeClient ...
在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果
通过标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上 ...
java注解接收上传文件,前台：Input type=file 后台获取文件内容用的是spring注解，当地环境上传图片是好的，发布到服务器上图片读取不到，求大神指点...
当前位置:我的异常网» Java Web开发 » 前台:Input type="file" 后台获取文件内前台:Input type="file" 后台获取文 ...

JS input[type=file]读取本地文件（读取json文件）

JS input[type=file]读取本地文件（读取json文件）相关推荐

最新文章

热门文章