(推荐读)reading local files in javascript 在chrome中开发读取当地文本
22小时前
Slicing a file In some cases reading the entire file into memory isn't the best option. For example, say you wanted to write an async file uploader. One possible way to speed up the upload would be to read and send the file in separate byte range chunks. The server component would then be responsible for reconstructing the file content in the correct order. Lucky for us, the File interface supports a slice method to support this use case. The method takes a starting byte as its first argument, ending byte as its second, and an option content type string as a third. The semantics of this method changed recently, so it has been vendor-prefixed: if (file.webkitSlice) { var blob = file.webkitSlice(startingByte, endindByte); } else if (file.mozSlice) { var blob = file.mozSlice(startingByte, endindByte); } reader.readAsBinaryString(blob); The following example demonstrates reading chunks of a file. Something worth noting is that it uses the onloadend and checks the evt.target.readyState instead of using the onload event. #byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; } Read bytes: 1-5 6-15 7-8 entire file function readBlob(opt_startByte, opt_stopByte) { var files = document.getElementById('files').files; if (!files.length) { alert('Please select a file!'); return; } var file = files[0]; var start = parseInt(opt_startByte) || 0; var stop = parseInt(opt_stopByte) || file.size - 1; var reader = new FileReader(); // If we use onloadend, we need to check the readyState. reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 document.getElementById('byte_content').textConten t = evt.target.result; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); } }; if (file.webkitSlice) { var blob = file.webkitSlice(start, stop + 1); } else if (file.mozSlice) { var blob = file.mozSlice(start, stop + 1); } reader.readAsBinaryString(blob); } document.querySelector('.readBytesButtons').addEve ntListener('click', function(evt) { if (evt.target.tagName.toLowerCase() == 'button') { var startByte = evt.target.getAttribute('data-startbyte'); var endByte = evt.target.getAttribute('data-endbyte'); readBlob(startByte, endByte); } }, false); Example: Slicing a file. Try it! Read bytes: 1-5 6-15 7-8 entire file Monitoring the progress of a read One of the nice things that we get for free when using async event handling is the ability to monitor the progress of the file read; useful for large files, catching errors, and figuring out when a read is complete. The onloadstart and onprogress events can be used to monitor the progress of a read. The example below demonstrates displaying a progress bar to monitor the status of a read. To see the progress indicator in action, try a large file or one from a remote drive. #progress_bar { margin: 10px 0; padding: 3px; border: 1px solid #000; font-size: 14px; clear: both; opacity: 0; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -webkit-transition: opacity 1s linear; } #progress_bar.loading { opacity: 1.0; } #progress_bar .percent { background-color: #99ccff; height: auto; width: 0; } Cancel read 0% var reader; var progress = document.querySelector('.percent'); function abortRead() { reader.abort(); } function errorHandler(evt) { switch(evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: alert('File Not Found!'); break; case evt.target.error.NOT_READABLE_ERR: alert('File is not readable'); break; case evt.target.error.ABORT_ERR: break; // noop default: alert('An error occurred reading this file.'); }; } function updateProgress(evt) { // evt is an ProgressEvent. if (evt.lengthComputable) { var percentLoaded = Math.round((evt.loaded / evt.total) * 100); // Increase the progress bar length. if (percentLoaded Example: Monitoring the progress of a read. Try it! Cancel read 0% Tip: To really see this progress indicator in action, try a large file or a resource on a remote drive. References File API specification FileReader interface specification Blob interface specification FileError interface specification ProgressEvent specification
发表评论
-
2011年春季消费者行为分析1
2012-01-20 11:26 8262011年春季消费者行为分析1 2011年04月21日 ... -
高中英语语法复习――定语从句
2012-01-20 11:26 547高中英语语法复习――定语从句 2012年01月12日 更 ... -
初二期末测试题
2012-01-20 11:19 576初二期末测试题 17小时 ... -
【转】 接上pl0-分析
2012-01-19 16:06 748【转】 接上pl0-分析 2011年11月23日 (* ... -
Mapx 错误集合(转载)
2012-01-19 16:06 2278Mapx 错误集合(转载) 2011年10月04日 Th ... -
Boost文档:第27章:线程(二)
2012-01-19 16:06 1169Boost文档:第27章:线程(二 ... -
Oracle异常处理
2012-01-19 16:06 615Oracle异常处理 2011年11 ... -
日少 サ妇
2012-01-17 05:57 484日少 サ妇 2011年11月04日 document.d ... -
女子被撞倒后拖行数百米致死 肇事车逼翻追赶者
2012-01-17 05:57 561女子被撞倒后拖行数百 ... -
河南周口警察将人打昏迷抛下楼致死 多人获刑
2012-01-17 05:57 667河南周口警察将人打昏迷抛下楼致死 多人获刑 2011年11月 ... -
2011-11-19-j
2012-01-17 05:57 5832011-11-19-j 2011年11月19日 ... -
别让印象骗了你、、、
2012-01-16 04:44 666别让印象骗了你、、、 2011年12月16日 “第一印象 ... -
二婚为何也能成为刘备皇后
2012-01-16 04:44 472二婚为何也能成为刘备 ... -
《诗经??国风??秦风》
2012-01-16 04:44 623《诗经??国风??秦风》 2011年12月21日 蒹 ... -
一代天骄成吉思汗的秘葬
2012-01-16 04:44 889一代天骄成吉思汗的秘 ... -
《论语》解读之3-19《使下以礼事上以忠》
2012-01-16 04:44 578《论语》解读之3-19《使下以礼事上以忠》 2011年12月 ...
相关推荐
本文件包含了我在linux下学习opencv Reading Geospatial Raster files with GDAL(使用GDAL读取地理空间栅格文件)中的学习笔记,遇到的bug以及最重要,比较难转换的tif文件
Reading Excel files using ODBC使用ODBC读Excel文件
用于读取IGES文件(IGES files for reading)
Julia module for reading MATLAB files
For example, you can create extensions to summarize the current page you are reading, or to save all of the images in the page you are browsing. They have access to almost all of the features ...
PHPExcel User Documentation - Reading Spreadsheet Files,最详细PHPExcel文档,不过是英文的,想学的可以好好读一下。
For example, you can create extensions to summarize the current page you are reading, or to save all of the images in the page you are browsing. They have access to almost all of the features ...
阅读网址的列表,稍后阅读 ...这也将在登录Chrome时启用自动同步-标签:添加阅读列表项时,我们需要阅读网址和活动标签的标题-contextMenus:添加我的阅读列表=>右键单击添加书签上下文菜单 支持语言:English
输入流文本,获得阅读超时。 超快速的Node.js纯缓冲区读取时间计算。 安装 npm i --save reading-time-stream 用法 此模式使您可以处理占用少量内存的大文件。 因为它不会转换为字符串,所以它也应该相当快,特别是...
matlab开发-读取TruevisionTargaimages。Truevision Targa文件格式图像阅读器,用于扩展TGA、VDA、icb-vst
This book covers the JavaScript ... My hope, however, is that it will reward careful study, and that the time you spend reading it will be easily recouped in the form of higher programming productivity.
fastreader快解密码读取软件 v1.1中文版,压缩解码工具
”从文本文件中读取信息,取其中的一部分,并且将其插入到数据库中去…… ” xhony@163.com ” version 1.0 ”=================================================================== <% dim fso,f1 Const ...
A small library for reading ROS bags in Matlab
本程序基于VS C#平台,能够在窗体中显示导入的图片文件,并读取指定范围像素的波段信息。
第1章 美丽的mixin先批判了一番class(要香蕉来了一整个森林),然后提出了mixin优点(和上相反)、缺点(js里面会有属性冲突)、改进方法(属性锁定、
This is a data reading program to read cos data
A Matlab interface for reading and writing NWB files.zip
Medium.com无限阅读Chrome扩展程序 删除会员专用内容的文章阅读限制。 极其轻巧,快速的解决方案,可无限制地阅读优质文章! 替换medium.com(和自定义域出版物)请求对Twitter缩短网址的引用。 这不是对漏洞的...