上传js,js修改html
<!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的更多相关文章
- DropzoneJS 可以拖拽上传的js库
介绍 可以拖拽上传的 js库 网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload http://blueimp.github.io/jQu ...
- 在线头像上传（js）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- HTML5 文件异步上传 — h5uploader.js
原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...
- 文件上传ajaxfileupload.js插件
Html: <div class="container"> <form id="form" runat="serv ...
- js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域
奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图 上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...
- js 图片压缩上传(纯js的质量压缩，非长宽压缩)
下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...
- 文件上传以及JS链式结构
文件上传: 文件上传使用FileUpload控件,使用控件的SaveAs方法,需要绝对路径. 获取文件的绝对路径:Server.MapPath(相对路径); 或许要上传文件的本身名字用.FileNam ...
- 前端图片压缩上传(纯js的质量压缩，非长宽压缩)
此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...
- [js]uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了
引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
- 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件
项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...
随机推荐
- Effective Java 第三版——76. 争取保持失败原子性
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- Python 爬虫实例（8）—— 爬取 动态页面
今天使用python 和selenium爬取动态数据,主要是通过不停的更新页面,实现数据的爬取,要爬取的数据如下图 源代码: #-*-coding:utf-8-*- import time from ...
- Introducing Apache Spark Datasets（中英双语）
文章标题 Introducing Apache Spark Datasets 作者介绍 Michael Armbrust, Wenchen Fan, Reynold Xin and Matei Zah ...
- 利用百度API(js)，怎样通过地址获取经纬度
根据经纬度找到具体地址:http://api.map.baidu.com/geocoder?location=纬度,经度&output=输出格式类型&key=用户密钥如:http:// ...
- iOS Message from debugger: Terminated due to memory issue ~解决方法
一.概念: /** 1.内存管理概念 2.查看其他技术分享结论 3.产生崩溃原因 4.解决方法以及思路 CSND: https://blog.csdn.net/shihuboke/article/de ...
- 物联网架构成长之路(28)-Docker练习之MQ中间件(Kafka)
0. 前言 消息队列MQ,这个在一般的系统上都是会用到的一个中间件,我选择Kafka作为练手的一个中间件,Kafka依赖Zookeeper.Zookeeper安装上一篇博客已经介绍过了. 1. Kaf ...
- 音视频编解码: YUV存储格式中的YUV420P,YUV420SP,NV12, NV21理解(转)
概述 之前介绍了YUV码流的采样格式,下面分析下YUV码流的存储格式,YUV码流的存储格式与采样格式息息相关.总的来讲,YUV存储格式主要分为两种: planar 平面格式 指先连续存储所有像素点的 ...
- npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was installed.
解决方案: 方法一: npm install -save react@~15.3.1 方法二:在package.json中可以添加依赖 "dependencies": { &quo ...
- Cordova热更新cordova-hot-code-push
原文转载自:https://www.cnblogs.com/huangenai/p/7137475.html cordova-hot-code-push ,Cordova热代码推送插件提供了在应用程序 ...
- bash计算上下行数据差值
for i in {1..60000}; do echo "`date +'%F %T'` `df /dev/md0 | grep 'data1'` "; sleep 1; don ...