<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>上传js文件</title>

    <style>

        div{

            width: 200px;

            height: 150px;

            background: yellow;

                    }

    </style>

</head>

<body>

    <input type="file">

    <div></div>

    <script>

        //获取上传的文件

        var fl = document.querySelector("input");

        fl.onchange=function(){

            var file = fl.files[0];

            //创建读取文件的对象

            var fRead = new FileReader();

            fRead.readAsText(file);//读取文件

            //文件加载的事件

            fRead.onload=function(){

                //读取文件的结果（读文件中都是js的代码，在script标签中）

                var txtJS = this.result;

                //创建script标签，并加入到head标签中

                var st = document.createElement("script");

                st.innerHTML = txtJS;//把js代码放在script标签中

                //把script标签加入到head标签中

                document.querySelector("head").appendChild(st);

            }

        }

    </script>

</body>

</html>

上传的txt.js

var div1 = document.querySelector("div");

div1.onclick = function(){

    div1.style.width = '300px';

    div1.style.height ='500px';

    div1.style.background="red";

}

实现的效果：

上传前：

上传成功后点击

上传js,js修改html的更多相关文章

  1. DropzoneJS 可以拖拽上传的js库

    介绍 可以拖拽上传的 js库 网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload   http://blueimp.github.io/jQu ...

  2. 在线头像上传（js）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. HTML5 文件异步上传 — h5uploader.js

    原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...

  4. 文件上传ajaxfileupload.js插件

    Html:  <div class="container">         <form id="form" runat="serv ...

  5. js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  6. js 图片压缩上传(纯js的质量压缩，非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  7. 文件上传以及JS链式结构

    文件上传: 文件上传使用FileUpload控件,使用控件的SaveAs方法,需要绝对路径. 获取文件的绝对路径:Server.MapPath(相对路径); 或许要上传文件的本身名字用.FileNam ...

  8. 前端图片压缩上传(纯js的质量压缩，非长宽压缩)

    此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...

  9. [js]uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了

    引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...

  10. 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

    项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...

随机推荐

  1. 《深度探索C++对象模型》调用虚函数

    如果一个类有虚函数,那么这个类的虚函数会被放在一个虚函数表里面, 使用这个类声明的对象中,会有一个指向虚函数表的指针,当使用指向 这个对象的指针或者这个对象的引用调用一个虚函数的时候,就会从虚函数表中 ...

  2. 【C++】C++中的引用与指针

    想必大家对C++中的指针都有所了解,但是什么是引用呢?C++11标准引入了“引用”的新功能. 引用 引用(reference):给对象起了另外一个名字,引用类型引用(refers to)另外一种类型, ...

  3. Redis 为什么使用单进程单线程方式也这么快（转载）

    Redis 采用的是基于内存的采用的是单进程单线程模型的 KV 数据库,由 C 语言编写.官方提供的数据是可以达到100000+的 qps.这个数据不比采用单进程多线程的同样基于内存的 KV 数据库 ...

  4. 14.翻译系列：从已经存在的数据库中生成上下文类和实体类【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/code-first-from-existing-database.aspx EF 6 ...

  5. 【转载】SpringCloud-Eurek 心跳阈值说明

    在使用eureka过程中,查看监控界面,出现: EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE ...

  6. MVC5 IIS7 403错误

    问题背景 MVC5部署到IIS7中显示403错误. 解决方案 <system.webServer> → <modules> 节点下的 ApplicationInsightsWe ...

  7. Gorm使用详解

    1.什么是Gorm go语言编写的orm框架 特点: 1)全功能ORM 2)关联(包含一个,包含多个,属于,多对多) 3)Callbacks(创建/保存/更新/删除/查找前后回调) 4)预加载 5)事 ...

  8. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

  9. HMACSHA1 加密算法

    https://blog.csdn.net/z69183787/article/details/78393216 ******************************************* ...

  10. [加密]openssl之数字证书签名，CA认证原理及详细操作

    转自:http://blog.sina.com.cn/s/blog_cfee55a70102wn3h.html 1 公钥密码体系(Public-key Cryptography) 公钥密码体系,又称非 ...