javascript - 如何在前端上传临时图 block 并在其浏览器 html div 元素上查看

标签 javascript jquery html file-upload

我想在前端上传一个临时文本文件,比如“.json”文件。

然后在当前窗口html的一个div元素中查看。

假设 html body 有两个 div

左边的 div 有一个带有上传按钮的表单来上传文件 上传文件后右侧div显示文件内容

我不想向任何服务器发出任何请求。 我只想要一个前端脚本来上传文件并在其选项卡窗口中显示

这可能吗?怎么办?

最佳答案

<body>
    <input id="File" type="file" />
    <input id="Button" type="button" value="button" />
    <div id="container"></div>
    <script>
        var input = document.getElementById('File');
        var button = document.getElementById('Button');
        var container = document.getElementById('container');
        button.onclick = function () {
            var reader = new FileReader();
            reader.onload = function () {
                container.innerHTML = reader.result;
            }
            input.files.length > 0 && reader.readAsText(input.files[0]);
        }
    </script>
</body>

关于javascript - 如何在前端上传临时图 block 并在其浏览器 html div 元素上查看,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24340169/

相关文章:

javascript - 从字符串中解析 HTML

javascript - 加载事件 jQuery,我可以附加它吗

jquery - 在选择选项更改时切换选项卡 Pane

javascript - 使用 Javascript Set 作为 Mongoose SchemaType?

javascript - 自定义数据-* 类型、css 和 javascript

javascript - 如何仅在选择某个下拉菜单项时激活输入字段

jquery - 如何获得 float 元素的边距?

html - Bootstrap 新手问题

html - 如何使导航栏居中并制作这样的容器?

html - 在移动 View 中移动文本下方的图像