input file 读取文件内容
2016-07-06 10:03
344 查看
<!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> if(typeof FileReader == "undified") { alert("您老的浏览器不行了!"); } function showDataByURL() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsDataURL(resultFile); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />"; }; } } function showDataByBinaryString() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); //异步方式,不会影响主线程 reader.readAsBinaryString(resultFile); reader.onload = function(e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } function showDataByText() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsText(resultFile,'UTF-8'); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } </script> </head> <body> <input type="file" name="fileDemo" id="fileDemo" multep/> <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/> <input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/> <input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/> <div id="result"> </div> </body> </html>
相关文章推荐
- 离散化模板
- Facebook 直播如何撑起瞬间 80 万人的流量?
- Spring MVC中Ajax实现二级联动的简单实例
- ST-Link 使用
- 网络信息安全学习平台---解密关第5题
- apache 中的AB测试
- 分布式事务及分布式系统一致性解决方案
- (转)应用内存优化之OnLowMemory&OnTrimMemory
- node和iisnode express手工安装
- 复习(java):语法:面向对象_2
- 多线程经典之生产者与消费者
- 关于js中正则的使用
- HDU3658 How many words 矩阵快速幂
- PSobj [11]帮朋友做的建筑作品集封面
- input file 上传文件后显示出来
- python多进程与多线程之间的联系
- poj1472[模拟题]
- WPF实现Twitter按钮效果(转)
- 安装myeclipse之前jdk的安装及配置(附:jre)
- LinuxMint 18 编译cm 笔记