zoukankan      html  css  js  c++  java
  • 代码编辑器:本地JS文件上传并加载到页面

    最近在做在线代码编辑器的时候,有个需求是使用者可以上传引用本地的 js 文件,进而在编辑器中使用这个文件定义的变量或方法。后来经过摸索,选择使用 FileReader 对象解决问题。

    FileReader MDN:
    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
    其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

    思路

    • 通过 <input> 控件获取用户上传的文件对象
    • 利用 FileReader 对象的 readAsDataURL(file) 方法获取文件以数据URI形式保存的一串字符串。
    • 生成 <script> 标签。
    • 将字符串赋值到 <script> 标签的 src 属性,标签动态加载到页面。

    实现

    <input id="file" type="file" onchange="handler()"/>
    
    function handler(){
        let file = document.getElementById("file").files[0]
        let r = new FileReader()
    	r.readAsDataURL(file, 'UTF-8')
    	r.onload = () => {//读取操作完成回调方法 加载script标签
        	    let script = document.createElement('script')
        	    let head = document.getElementsByTagName('head')[0]
        	    script.src = r.result//内容保存在result中
        	    head.appendChild(script)
    	}
    }
    
  • 相关阅读:
    java_list<String> string[]拼接json
    java_method_删除事务回滚
    java_jdk_JDK版本切换批处理脚本
    java_js_检查是否全为数字
    java_method_stringUtils
    java_method_下拉框成json
    java_method_下载导入模版
    java_js_json_日期格式化
    java_js从字符串中截取数字
    gulp+tp5配置
  • 原文地址:https://www.cnblogs.com/qimeng/p/10595725.html
Copyright © 2011-2022 走看看