Category Archives: html5
[html5]网页的全屏模式: Fullscreen API
Posted by wolftankk
on 2011/12/21
No comments
它是怎么工作的呢? 比如<div>这个元素想要全屏, 首先需要
div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); div.mozRequestFullScreen();
退出全屏模式, 只需要在docment元素做操作即可:
document.webkitCancelFullScreen(); document.mozCancelFullScreen();
当全屏模式被创建后, 你需要针对这个div设置一下css.例如:
div:-webkit-full-screen{ width: 100% !important; } div:-moz-full-screen{ width: 100% !important; } :-webkit-full-screen .tohide{ display:none; } :-moz-full-screen .tohide{ display:none; }
Fullscreen API在chrome 15下已经默认开启了, 在Firefox night builds版本下, 你需要在about:config中设置fullscreen-api.enabled为true. 了解更多详情可以参阅Fullscreen设计草案.
使用js读取文件
Posted by wolftankk
on 2011/12/19
No comments
文章原地址: Reading locale files in Javascript
简介
HTML5通过File API提供了一套读取文件的标准方法.
选择文件
首先我们通过以下代码检测你的浏览器是否支持File API:
if (window.File && window.FileReader && window.FileList && window.Blob){ //你的浏览完全支持这些API }else{ //你的浏览器不完全支持这些API }
通过input方式上传文件
<input id="files" type="file" name="files[]" /> <output id="list"></output> <script type="text/javascript"> function handlerFileSelect(e){ var files = e.target.files;//从event中获取FileList var output = []; for (var c = 0, f; f = files[c]; ++c){ output.push("<li><b>", f.name, "</b> (", f.type || "n/a", ")-", f.size, " bytes, last modified: ", f.lastModifiedDate.toLocaleDateString(), "</li>"); } document.getElementByID("list").innerHTML = "<ul>" + output.join("") + "</ul>"; } document.getElementByID("files").addEventListener("change", handlerFileSelect, false); </script>
示例: 现在我们就来尝试一下.
通过拖放功能上传文件
这个是html5新增的一个功能, 可以让你直接从桌面拖文件到指定区域.
<div id="drop_zone">将文件拖放到此处</div> <output id="list"></output> <script> function handleFileSelect(e){ e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; var output = []; for (var c =0, f; f = files[c]; ++c){ output.push("<li><b>", f.name, "</b> (", f.type || "n/a", ")-", f.size, " bytes, last modified: ", f.lastModifiedDate.toLocaleDateString(), "</li>"); } document.getElementByID("list").innerHTML = "<ul>" + output.join("") + "</ul>"; } function hanleDragOver(e){ e.stopPragation(); e.preventDefault(); e.dataTransfer.dropEffect = "copy"; } var dropZone = document.getElementByID("drop_zone"); dropZone.addEventListener("dropover", handleDragOver, false); dropZone.addEventListener("drop", handleFileSelect, false); </script>
备注: 有些浏览器
<input type="file">
直接支持原生的拖放.
读取文件
最最重要部分来了.
在你获取文件后, 就要开始使用FileReader读取文件了.
FileReader共有4种方式:
- FileReader.readAsBinaryString(Blob|File) –
- FileReader.readAsText(Blob|File, opt_encoding) –
- FileReader.readAsDataURL(Blob|File) –
- FileReader.readAsArrayBuffer(Blob|File) –
<style> .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> <input type="file" id="files" name="files[]" multiple /> <output id="list"></output> <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', theFile.name, '"/>'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
解析文件
二进制读取
if (file.webkitSlice) { var blob = file.webkitSlice(startingByte, endindByte); } else if (file.mozSlice) { var blob = file.mozSlice(startingByte, endindByte); } reader.readAsBinaryString(blob);
<style> #byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; } </style> <input type="file" id="files" name="file" /> Read bytes: <span class="readBytesButtons"> <button data-startbyte="0" data-endbyte="4">1-5</button> <button data-startbyte="5" data-endbyte="14">6-15</button> <button data-startbyte="6" data-endbyte="7">7-8</button> <button>entire file</button> </span> <div id="byte_range"></div> <div id="byte_content"></div> <script> 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').textContent = 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').addEventListener('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); </script>
边上传边读取
<style> #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; } </style> <input type="file" id="files" name="file" /> <button onclick="abortRead();">Cancel read</button> <div id="progress_bar"><div class="percent">0%</div></div> <script> 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 < 100) { progress.style.width = percentLoaded + '%'; progress.textContent = percentLoaded + '%'; } } } function handleFileSelect(evt) { // Reset progress indicator on new file selection. progress.style.width = '0%'; progress.textContent = '0%'; reader = new FileReader(); reader.onerror = errorHandler; reader.onprogress = updateProgress; reader.onabort = function(e) { alert('File read cancelled'); }; reader.onloadstart = function(e) { document.getElementById('progress_bar').className = 'loading'; }; reader.onload = function(e) { // Ensure that the progress bar displays 100% at the end. progress.style.width = '100%'; progress.textContent = '100%'; setTimeout("document.getElementById('progress_bar').className='';", 2000); } // Read in the image file as a binary string. reader.readAsBinaryString(evt.target.files[0]); } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>