2023/05/17记录
html标签使用练习
1 <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top"> 2 <p style="text-align:left;margin:10px">(居左)</p> 3 <p style="text-align:center;margin:10px">(居中)</p> 4 <p style="text-align:right;margin:10px">(居右)</p> 5 <p style="text-align:center">^-^</p> 6 </div>段落布局标签
FileReader读取文件。（FileWrite还在研究，浏览器似乎不支持）
1 @*组件3*@
2 <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top">
3 <div>
4 本地txt读取
5 <input type="file" id="file3" />
6 <p id="result3" style="word-wrap:break-word;overflow:scroll;height:100px"></p>
7 @*此处result放置读取结果*@
8 <input type="button" value="打开txt" onclick="readText3()" style="width:180px"/>
9 <script type="text/javascript">
10 var reader = FileReader ? new FileReader : (alert("浏览器暂不支持FileReader"),null);
11 var readText3 = function () {
12 // 以文本文件方式读取文件
13 if (/text\/\w+/.test(document.getElementById("file3").files[0].type)) {
14 reader.readAsText(document.getElementById("file3").files[0], "utf8");
15 //reader.readAsBinaryString(document.getElementById("file1").files[0]);//读取二进制文件
16 //reader.readAsDataURL(document.getElementById("file1").files[0]);//以DataURL方式读取
17 reader.onload = function () {
18 document.getElementById("result3").innerHTML = reader.result;//result更新
19 };
20 } else {
21 alert("你选择的不是文本文件！");
22 }
23 }
24 </script>
25 </div>
26 </div>
浏览读取txt文件
1 @*组件4*@
2 <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top">
3 <div>
4 本地img读取
5 <input type="file" id="file4" />
6 <p id="result4" style="width:100px"></p>
7 @*此处result放置读取结果*@
8 <input type="button" value="打开img" onclick="readText4()" style="width:180px" />
9 <script type="text/javascript">
10 var reader = FileReader ? new FileReader : (alert("浏览器暂不支持FileReader"), null);
11 var readText4 = function () {
12 reader.readAsDataURL(document.getElementById("file4").files[0]);
13 reader.onload = function (e) {
14 document.getElementById("result4").innerHTML = '<img src="' + this.result + '" alt=""/>'
15 }
16 }
17 </script>
18 </div>
19 </div>
浏览读取img文件
按钮配置及事件设置模板
1 @*组件5*@
2 <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top">
3 <h style="text-align:center">按钮模板</h>
4 <input type="button" value="点击按钮验证响应" style="width:180px" onclick="writeTXT1()">
5 <p id="zhuangtai1"></p>
6 <script type="text/javascript">
7 var writeTXT1 = function () {
8 document.getElementById("zhuangtai1").innerHTML = "<font color='blue' size='3px'>已检测到按钮点击事件</font>";
9 }
10 </script>
11 </div>
按钮编辑模板
标签：读取,FileReader,学习,getElementById,reader,var,NET,document,入门 From： https://www.cnblogs.com/yyn20230517/p/17408940.html