fileReader文件预览，拖拽，定位，WEB存储，应用缓存

最新推荐文章于 2022-11-03 15:57:01 发布

原创最新推荐文章于 2022-11-03 15:57:01 发布 · 614 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fileReader

html css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用fileReader接口实现文件即时预览，详细讲解了readAsDataURL方法在预览中的应用。同时，提到了通过设置draggable属性实现拖拽功能，并讨论了地理定位、Web存储（包括localStorage和sessionStorage）以及应用缓存的相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fileReader文件预览
即时：用户选择图片后可以立即预览=>>onchange
预览：通过readAsDataURL 完成

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
FileReader接口的方法

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
处理事件

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

代码：

<body>
    <input type="file" name="pic" id="pic" onchange="show()">
    <br>
    <input type="submit" value="上传图片">
    <div class="show"><img src="" alt=""></div>
    <script>
        function show (){
            var reader = new FileReader();
            var file = document.getElementById('pic').files; 
            reader.readAsDataURL(file[0]);
            var img = document.getElementsByTagName('img')[0];
            reader.onload = function(){
                img.src = reader.result;
            }
            var div = document.getElementsByTagName('div')[0];
        }
    </script>
</body>

拖拽

添加标签draggable = “true”，元素可拖拽。
代码：

<body>
    <div>
        <p draggable="true">hello world~</p>
    </div>
    <div></div>
    <script>
        var obj =null;//保存事件源
        document.ondragstart = function(e){
            e.target.style.opacity = 0.5 ;
            obj = e.target;
        }
        document.ondragend = function(e){
            e.target.style.opacity = 1 ;
        }
        document.ondragover = function (e){
            e.preventDefault();//阻止默认事件
        }
        document.ondrop = function (e){
            e.target.appendChild(obj);
        }
    </script>
</body>

上述方法存在缺陷，即保存了全局变量，可以用e.dataTransfer.setData存储数据，该数据只能再drop事件中获取。

document.ondragstart = function(e){
    e.target.style.opacity = 0.5 ;
    e.dataTransfer.setData("text/html",e.target.id)
  }

document.ondrop = function (e){
           var id = e.dataTransfer.getData("text/html");
            e.target.appendChild(document.getElementById(id));
 }

地理定位

	<p id="demo">点击这个按钮，获得您的坐标：</p>
	<button onclick="getLocation()">试一下</button>
	<script>
		var x = document.getElementById("demo");
		function getLocation() {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(showPosition, showError);
			} else {
				x.innerHTML = "Geolocation is not supported by this browser.";//浏览器不支持定位
			}
		}
		function showPosition(position) {
			x.innerHTML = "Latitude: " + position.coords.latitude
					+ "<br />Longitude: " + position.coords.longitude;
		}
		function showError(error) {
			switch (error.code) {
			case error.PERMISSION_DENIED:
				x.innerHTML = "User denied the request for Geolocation.";//用户不允许地理定位
				break;
			case error.POSITION_UNAVAILABLE:
				x.innerHTML = "Location information is unavailable.";//无法获取当前位置
				break;
			case error.TIMEOUT:
				x.innerHTML = "The request to get user location timed out.";//操作超时
				break;
			case error.UNKNOWN_ERROR:
				x.innerHTML = "An unknown error occurred.";//未知错误
				break;
			}
		}
	</script>
</body>

web存储：
cookie的容量为4k，H5存储的容量达到5-10M
localstorage：
没有时间限制，关闭浏览数据也会存在的。
保存数据：localStorage.setItem(key,value)或者localStorage.key=value。
例如：localStorage.age=“12”; localStorage.address=“北京”，打开调试窗口可以看到localStorage里面的值

读取数据。localStorage.getItem(key) 或者 localStorage.key
console.log(localStorage.age)；//输出结果为12。

删除数据。
单个删除：localStorage.removeItem(key);
删除所有：localStorage.clear();
sessionStorage：针对一个session，关闭浏览器数据就会被删除。

2.应用缓存：
声明：<html manifest="cache.manifest">
在这里插入图片描述