支持FileReader的浏览器

2024-08-24

FileReader详解

一.兼容性从上图中可以看出IE7.8.9都不支持FileReader对象二.作用使用支持FileReader浏览器的用户可以通过一个file input选择一个图像文件将图片显示在页面中,而不用发送到后端,由后端对其进行存储,再由后端返回一个url地址,通过url来显示图像.FileReader使得Js拥有了处理文件的能力,它可以异步地读取存储在用户电脑中的文件(此处的文件对js来说是一个File对象) 三.判断浏览器是否支持FileReader 支持这一接口的浏览器有一个位于window

判断浏览器是否支持FileReader

1.js代码: //判断浏览器是否支持FileReader if (typeof FileReader == "undefined") { document.write("您的浏览器不支持FileReader"); } else { document.write("您的浏览器支持FileReader"); } /** * 测试结果说明:Google,FF,IE都支持FileReader * 但是IE9及以下浏览器不支持FileReader */

console.debug()浏览器控制台打印输出仅仅在支持console的浏览器下打印

console.debug()浏览器控制台打印输出仅仅在支持console的浏览器下打印 var util = {}; /** * 工具类 */ util = new function() { /** * 控制台打印输出仅仅在支持console的浏览器下打印 * @param info 信息打印 */ this.debug = function(info){ try{ if(console != undefined && console != null && conso

不支持javascript的浏览器将JS脚本显示为页面内容

不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“text/javascript”><!文件.写(“你好,世界!”)://-></Script ><正文></HTML>注释行末尾的两个正斜杠是javascript的注释符号,它阻止了javascript编译器编译该行.质问既然是注释,为什么它会出现在显示结果中?

【javascript】复制到剪贴板功能（支持目前各种浏览器）

本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌). 本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboard/zeroclipboard). 本demo 必须在服务器环境下,浏览器直接打开无效. 本demo 需要引入3个文件:jquery.min.js.ZeroClipboard.min.js和ZeroClipboard.swf. <!DOCTYPE html> <html> <he

目前支持WebGL的浏览器有哪些？

Google Chrome 9+ Mozilla Firefox 4+ Safari 5.1+(仅限于Mac OS X操作系统,不包括Windows) Opera 12 alpha及以上版本 IE9+,但是IE并不支持WebGL,不过你可以通过下载并安装IEWebGL这个插件 WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供

dropwizard使用cors支持跨域浏览器取不到自定义header问题

dropwizard支持cors的配置如下: public void run(Configuration conf, Environment environment) { // Enable CORS headers final FilterRegistration.Dynamic cors = environment.servlets().addFilter("CORS", CrossOriginFilter.class); // Configure CORS parameters

使用FileReader在浏览器读取预览文件(image和txt)

如标题,之前在某个地方看到因为有Blob的存在,理论上可以在浏览器上查看所有格式的文件.自己想着试试现在暂时只能够查看图片和预览txt文件.其他的比如doc,docx格式的文件查看的时候是乱码如图:可以多选照片查看,可以查看txt文件不说多了,主要是利用filereader读取blob转成base64或者直接读取文本然后展示.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

图片上传预览支持html5的浏览器

<img src="" width="100px" height="100px"/> <input type="file" onchange="showPreview(this)"/> //图片预览的 function showPreview(source){ var file = source.files[0]; if(window.FileReader) { var fr = n

destoon 6.0 手机站支持在所有浏览器访问

我们的在本地调试destoon 6.0的手机站模板时,用浏览器的自带审查元素很不方便. 可是destoon 默认是在电脑端打不开手机站,如果这个设置能够去除掉,那就可以了. 去掉这个限制,指需要两步 1.打开 mobile/common.inc.php 这个文件把if(strpos($UA, 'WINDOWS NT') !== false && !DT_DEBUG) dheader($EXT['mobile_url'].'mobile.php?action=device');注销为//i

js 阻止事件冒泡支持所有主流浏览器

function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor ==MouseEvent || arg0.constructor==KeyboardEvent) ||(typeof(arg

Ajax上传图片以及上传之前先预览

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览方式一先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇博客HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

jquery实现上传图片预览(需要浏览器支持html5)

jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

html5录音支持pc和Android、ios部分浏览器，微信也是支持的，JavaScript getUserMedia

以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供实时音量反馈.有一个波形显示扩展支持.录音结果非常容易立即播放录音或者上传录音到服务器(提供参考源码). 2018-05-16首发,2019-04-21更新 GitHub地址:https://github.com/xiangyuecn/Recorder 在线测试demo传送门:https://xia

MediaElement.js对不同浏览器的支持

目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js,它不仅能够添加我们常用的html5视频格式(mp4,m4v,mov), 而且还支持回退方式,即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放,从而达到支持绝大部分的浏览器. 亲测IE8下能使用HTML5的video标签,以及支持对hls流媒体的播放,webm视频格

浏览器版本不支持页面示例 supper.html

关键点在于<html>标签和js.<!--[if lt IE 10]>的配合使用360浏览器兼容模式下查看:http://runjs.cn/code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery File Uploader.FineUploader.Uploadify.Baidu Web Uploader 等等),功能都很强大,代码量一般也较大.当时心想,就这么个小功能,杀鸡焉用牛刀,用库的话还得熟悉它的用法,有的需要引入额外的库,纯Flash的不考虑,还是动手造个轮子得了,至少造过之后能

Debug - 支持浏览器和 Node 平台的全端调试工具

Debug 是一个跟踪调试消息的 JavaScript 库.因为它只是对 console.log 的包装,所以支持 Node 和浏览器.它允许你过滤日志输出而不需要改变你的源代码,也输出时间差异,可以让您轻松地告诉你日志消息间隔多少时间. 您可能感兴趣的相关文章太赞了!超炫的页面切换动画效果[附源码下载] 真是好东西!13种非常动感的页面加载动画效果你见过吗?9款超炫的复选框(Checkbox)效果超赞!基于 Bootstrap 的响应式的后台管理模板创意无限!一组网页边栏过渡动画[附源

css3 -- 浏览器支持

浏览器支持的前缀: 1.浏览器兼容前缀 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/ -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-tr

移动Web开发，4行代码检测浏览器是否支持position:fixed

不废话,直接上代码 var div = document.createElement('div'); div.style.cssText = 'display:none;position:fixed;z-index:100;'; body.appendChild(div); console.log(window.getComputedStyle(div).position != 'fixed'); 对于不支持fixed的浏览器,window.getComputedStyle(div).posit

[转]让Sublime Text2支持浏览器中预览

转自http://www.imququ.com/post/view-sublime-text-2-file-in-browser.html 1.点击菜单Tools -> New Plugin...,在创建好的py文件输入下列内容: import sublime, sublime_plugin import webbrowser url_map = { '/Users/jerry/Sites/test/' : 'http://test/', } class OpenBrowserCommand(s

支持FileReader的浏览器

热门专题