js读取本地文件的实例

前端之家收集整理的这篇文章主要介绍了js读取本地文件的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如何用在浏览器端预览本地文件

今天的主题是使用浏览器预览本地文件

由于浏览器安全策略的限制,javascript程序不能自由地访问本地资源,这是对用户信息安全来说,是一项不得不遵守的准则。假如网络上的javascript程序可以自如地访问用户主机的本地资源,那么浏览器用户将毫无安全可言。尽管有这个安全限制,但是在得到用户允许的情况下,浏览器还是可以访问本地资源的。

获得用户允许的方法就是通过标签来让用户手动选择文件,这一过程就是用户授予访问权限的过程。然后 使用获得File 对象通过URL.createObjectURL(file)转换为文件url,就可以传递给类似y于img,video,audio标签使用了。我将本地文件转换为url 的功能封装成了一个类。

使用方法

文件选择框,并且监听文件选择事件。 localFileUrl.getUrl(function(urls){ urls.forEach(function(item,array){ $("body").append("
"+index+"----"+item.url+"
") }) })

使用jQuery 的promise对象改写

这种方式的好处是可以使用链式写法,并且可以绑定多个done事件处理函数,执行顺序按照绑定顺序。

使用方式

"+index+"----"+item.url+"
") }) }).done(function(){ console.log("完成"); }).done(function(){ alert("已经读取了本地文件路径"); })

兼容性

URL.createObjectURL(File/Blob)是一个实验性的功能IE10及以上版本兼容。与之对应的是URL.revokeObjectURL(url),它用来告诉浏览器已经不需要这个url的引用了,可以释放掉了。一经调用,这个url立即失效。

原文链接:https://www.f2er.com/js/34559.html

猜你在找的JavaScript相关文章