-
-
Save luftreich/15d95c3887974ea4bc6c403568a4916a to your computer and use it in GitHub Desktop.
在线预览本地图片，html5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>本地图片在线预览</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var result=document.getElementById("result"); | |
| var file=document.getElementById("file"); | |
| //判断浏览器是否支持FileReader接口 | |
| if(typeof FileReader == 'undefined'){ | |
| result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>"; | |
| //使选择控件不可操作 | |
| file.setAttribute("disabled","disabled"); | |
| } | |
| function readAsDataURL(){ | |
| //检验是否为图像文件 | |
| var file = document.getElementById("file").files[0]; | |
| if(!/image\/\w+/.test(file.type)){ | |
| alert("看清楚，这个需要图片！"); | |
| return false; | |
| } | |
| var reader = new FileReader(); | |
| //将文件以Data URL形式读入页面 | |
| reader.readAsDataURL(file); | |
| reader.onload=function(e){ | |
| var result=document.getElementById("result"); | |
| //显示文件 | |
| result.innerHTML='<img src="' + this.result +'" alt="" />'; | |
| } | |
| } | |
| function readAsBinaryString(){ | |
| var file = document.getElementById("file").files[0]; | |
| var reader = new FileReader(); | |
| //将文件以二进制形式读入页面 | |
| reader.readAsBinaryString(file); | |
| reader.onload=function(f){ | |
| var result=document.getElementById("result"); | |
| //显示文件 | |
| result.innerHTML=this.result; | |
| } | |
| } | |
| function readAsText(){ | |
| var file = document.getElementById("file").files[0]; | |
| var reader = new FileReader(); | |
| //将文件以文本形式读入页面 | |
| reader.readAsText(file); | |
| reader.onload=function(f){ | |
| var result=document.getElementById("result"); | |
| //显示文件 | |
| result.innerHTML=this.result; | |
| } | |
| } | |
| </script> | |
| <p> | |
| <label>请选择一个文件：</label> | |
| <input type="file" id="file" /> | |
| <input type="button" value="读取图像" onclick="readAsDataURL()" /> | |
| <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" /> | |
| <input type="button" value="读取文本文件" onclick="readAsText()" /> | |
| </p> | |
| <div id="result" name="result"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment