JS学习--用JS读取本地文件

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在学习JS，学习了一下JS读取本地文件的额方法，总结一下做个记录</span>

-----------------------------------------------------------------------------------------------------------------------------------------------------

我写了一个html页面，实现了从本地读入一个文件，并显示它的名字和类型信息。如果是图片的话，也把它画出来

------------------------------------------------------------------------------------------------------------------------------------------------------

涉及的文件读取的html的标签：

<input type="file"></span>

我们指定type属性为"file"就可以选择本地的一个文件。这个input标签加上"file"属性对应的HTML DOM对象是FileUpload对象。关于这个对象的更详细的教程可以参见w3schoo的教程。FileUpload.files保存着我们选择的文件，这是一个FileList对象，这个列表每一个元素都是一个File对象。

当我们选定一个文件，点击一个类似于“Open”的按钮退出对话框的时候，会触发HTML的事件。一般通过onchange这个事件操作，我在firefox中试过oninput发现这个事件不能响应上述情况。所以大概的操作input标签的流程如下：

<input id="myfile" type="file" />
<script>var file = document.getElementById("myfile");file.onchange = function(event){//manipulate on files, for exampleconsole.log(this.files[0]);}
</script>

涉及到文件读取的HTML DOM其他对象有，FileReader，File，FileList。Filelist就是File的列表。File常用的几个属性有

File.name    //文件名字
File.type    //文件MIME类型
File.size    //文件大小，以字节记

我们通过input标签只能获得File对象，如果要读取文件的内容，还需要FileReader的帮忙。这里是FileReader在MDN上的参考资料。html5 rocks上也有一篇关于读取文件的文章，在这里。FileReader是异步读取的方法，通常我们使用onload这个事件在读取文章完成后接续我们的操作。FileReader有一个readAsDataURL(instanceOfFile)方法，这个方法得到的结果会将文件的内容以URL的形式存储，把它打出来就是这样的“data:MIMEType;base64,..."。因为我主要是想读取图像，所以就选取了这个方法。

在画出读取的图像这个阶段，为了赶时髦，我用了HTML5的画布，我是新建一个Image对象，然后直接对Image.src赋值为FileReader.result，然后就将画布的长宽设定为图像的长宽，再画出来。在Firefox中，这么做画布的长宽都是0，但是在chrome中就是正常的。不得不说chrome真是个神器啊。

最后附上html的源代码：

<html><head><meta charset="utf-8" /><title>File Input Test</title></head><body><h1>File Input Test</h1><input id="myinput" type="file" /><br /><p id="name"></p><br /><canvas id="mycanvas"></canvas><script type="text/javascript">var file = document.getElementById("myinput");var canvas = document.getElementById("mycanvas");var ctx = canvas.getContext("2d");file.onchange = function(event){var f = this.files[0];document.getElementById("name").innerHTML="you open "+f.name+" it's type is "+f.type;var reader = new FileReader();reader.onload = function(event){var bytes = this.result;console.log(bytes);if(!f.type.match("image.*")) return;var image = new Image();image.src = ""+bytes;//in firefox, width and height of canvas is 0//but in chrome, it's ok.canvas.width = image.width;canvas.height = image.height;ctx.drawImage(image,0,0);}reader.readAsDataURL(f);}</script></body>
</html>

JS学习--用JS读取本地文件相关推荐

JS input[type=file]读取本地文件（读取json文件）
这里从添加input元素开始做起,如果不用添加的话,直接从绑定onchang事件开始就可以了 // 创建input元素 let input_element = document.createEleme ...
js读写php文件,在js中如何读取本地文件
下面我就为大家分享一篇js读取本地文件的实例,具有很好的参考价值,希望对大家有所帮助. 如何用在浏览器端预览本地文件? 今天的主题是使用浏览器预览本地文件. 由于浏览器安全策略的限制,javascri ...
cordova js(javascript)读取本地文件（将本地的bin文件转成字节数组）
此问题已经解决,解决方法参考我的博客: cordova本地存储(存取): 读取项目里的本地文件文章目录 1.下面两个比较有用: 2.下面两篇博客证明不用input标签的情况下,无法获取本地文件(包括 ...
html js引用本地资源,了解使用JavaScript读取本地文件的方法
本篇文章给大家介绍一下使用JavaScript读取本地文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件.如 ...
js读取本地文件和写入本地文件
读取本地文件: <!doctype html> <html lang="en"> <head><meta charset="UT ...
js调用文件服务器出现跨域,js 读取本地文件遇到ajax跨域问题
环境:win10 语言:js 对象:easyUI SKD demo 级别:小小白级本篇博文记录博主从js小小白的进化历程,下述问题对老鸟来说再简单不过,但是作为新手一定会经历这样的阶段,所以还是分享 ...
ie浏览器读取本地文件并上传
接到个需求,需要js自己去取本地的文件并上传,要求不使用input标签实现思路,先使用了ie的ActiveXObject方法,这里先需要把ie浏览器的安全设置都设为最低,再把项目地址拉到信任地址里. ...
Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互
Electron教程(五)读取本地文件内容, ipcMain ipcRenderer 之间的交互 Electron教程(一)什么是 Electron,由来.适用场景和 Electron 的环境搭建 ...
保存页面文本到本地文件读取本地文件内容到页面
问题描述:假设网页有个文本框之类的东西,想通过点击某一按钮后,将用户在文本框中输入的内容直接保存在本地某个文件中.同理,也想通过页面直接读取本地文件中的内容. 问题分析:因为整个处理过程不涉及到后台的 ...

JS学习--用JS读取本地文件

JS学习--用JS读取本地文件相关推荐

最新文章

热门文章