h5新知识_1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="file" id="file" />
 9     <p></p>
10     <img src="" alt="" width="300">
11 <script src="js/jquery-3.3.1.js"></script>
12 <script>
13     $(function () {
14        $('#file').on('change', function () {
15            // console.log(this.files);
16            // 1. 创建文件读取对象
17            let reader = new FileReader();
18            // 2. 读取图片
19            reader.readAsDataURL(this.files[0]);
20            // 3. 读取内容完毕
21            $(reader).on('load', function () {
22                // console.log(this.result);
23                $('img').attr('src', this.result);
24            })
25        })
26     });
27 </script>
28 </body>
29 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7 </head>
 8 
 9 <body>
10     <input type="file" id="file" />
11     <div id="content"></div>
12     <script src="js/jquery-3.3.1.js"></script>
13     <script>
14         $(function () {
15             $('#file').on('change', function () {
16                 // 1. 获取文件的内容， 集合
17                 //console.log(this.files);
18 
19                 // 2. 初始化文件读取对象
20                 let reader = new FileReader();
21                 // console.log(reader);
22                 // console.log(typeof this.files[0]);
23 
24                 // 3. 读取文件内容
25                 reader.readAsText(this.files[0]);
26                 // reader.readAsBinaryString(this.files[0]);
27                 // reader.readAsDataURL(this.files[0]);
28 
29                 // 4. 获取读取的内容
30                 $(reader).on('load', function () {
31                     console.log("11")
32                     console.log(this.result);
33                     $('#content').html(this.result);
34                 })
35             });
36         });
37     </script>
38 </body>
39 
40 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>sessionStorage</title>
 6 </head>
 7 <body>
 8    <!--<input type="text" name="intro" />-->
 9    <br>
10    <br>
11    <button id="setData">写数据</button>
12    <button id="getData">读数据</button>
13    <button id="clearData">删除数据</button>
14 <script src="js/jquery-3.3.1.js"></script>
15 <script>
16     $(function () {
17         // 1. 设置数据
18         $('#setData').on('click', function () {
19             let arr = ['张三', '李四', '王五'];
20             window.sessionStorage.setItem('name', '小撩');
21             window.sessionStorage.setItem('address', '上海');
22             window.sessionStorage.setItem('friends', JSON.stringify(arr));
23         });
24 
25         // 2. 读取数据
26         $('#getData').on('click', function () {
27             console.log(sessionStorage.getItem('name'));
28             console.log(sessionStorage.getItem('address'));
29             console.log(JSON.parse(sessionStorage.getItem('friends')));
30         });
31 
32         // 3. 删除数据
33         $('#clearData').on('click', function () {
34              // sessionStorage.removeItem('name');
35              // sessionStorage.removeItem('address');
36              // 删除所有的
37              sessionStorage.clear();
38         });
39 
40     });
41 </script>
42 </body>
43 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>localStorage</title>
 6 </head>
 7 <body>
 8     <button id="setData">写数据</button>
 9     <button id="getData">读数据</button>
10     <button id="clearData">删除数据</button>
11     <script src="js/jquery-3.3.1.js"></script>
12     <script>
13         $(function () {
14             // 1. 设置数据
15             $('#setData').on('click', function () {
16                 let arr = ['张三', '李四', '王五'];
17                 window.localStorage.setItem('name', '小撩');
18                 window.localStorage.setItem('address', '上海');
19                 window.localStorage.setItem('friends', JSON.stringify(arr));
20             });
21 
22             // 2. 读取数据
23             $('#getData').on('click', function () {
24                 console.log(localStorage.getItem('name'));
25                 console.log(localStorage.getItem('address'));
26                 console.log(JSON.parse(localStorage.getItem('friends')));
27             });
28 
29             // 3. 删除数据
30             $('#clearData').on('click', function () {
31                 // sessionStorage.removeItem('name');
32                 // sessionStorage.removeItem('address');
33                 // 删除所有的
34                 localStorage.clear();
35             });
36 
37         });
38     </script>
39 </body>
40 </html>

猜你喜欢