- 浏览: 419613 次
- 性别:
- 来自: 济南
文章分类
最新评论
-
pmh905001:
写的很详尽,感谢!
解析jvm.dll和java.exe -
Bll:
插得真深啊,我的是(eclipse_j2ee_juno):F: ...
在eclipse里jsp编译后的java和class文件的位置 -
heming_way:
谢谢,对我很有用,解答了我对多值依赖的疑问
关于多值依赖--范式! -
JavaStudy2011:
java语言解析xml文件 -
vrussell:
Thanks man, it helps me a lot!
获得IEditorPart和IDocument
先看一个实例:
jsp
js代码
themePath是input file的id获得的var
java代码:
对于文件上传,新版本的浏览器对访问客户端内容设置了较高的权限。虽然现在有变相的 “解决办法”,但都需要用户在访问页面的时候,额外的进行浏览器的安全设置(允许Javascript脚本访问更多的本地内容),否则单靠Javascript还是无法直接进行访问。这就意味这我没有办法像以前那样去直接调用file input的value来进行图片的预览。
在新版本的浏览器中有提供nsIDOMFile这样一个接口,它提供了三个方法可以使用,分别是:
DOMString getAsBinary();
DOMString getAsDataURL();
DOMString getAsText(in DOMString encoding);
详细的资料看这裡:https://developer.mozilla.org/en/NsIDOMFile
我们这裡就是要使用getAsDataURL()这个方法,这个方法会返回一个data: URL类型的DOMString,它的内容就是文件经过编码后的数据了。也就是获得的文件的数据
下面是预览图片,利用上述方法的实现。。
针对这个有下面解释
所谓"data"类型的Url格式,是在RFC2397中
提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个
点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持!
如:<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA.."/> 就可以显示为一张图片
data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是网页的内容。
这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。
data类型Url的形式
既然是Url,当然也可以直接在浏览器的地址栏中输入。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
在浏览器中输入以上的Url,会得到一个加粗的"Hello, world!"。也就是说,data:后面的数据直接用做网页的内容,而不是网页的地址。
注:Internet Explorer 不支持
简单的说,data类型的Url大致有下面几种形式。
完整的语法定义
在RFC中,完整的语法定义如下。
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允许的字符,有些字符需要转义,例如"="要转义为"%3D",不过我测试下来,至少在Firefox里面,不转义也是可以的。
parameter可以对mediatype进行属性的扩展,常见的是charset,用来定义编码格式,在多语言情况下需要用到。例如下面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出"你好,中文!"。如果吧charset部分去掉,就会显示乱码,因为我用的是UTF-8编码。
Firefox有一个data类型Url的测试页面,列出了各种格式的data类型Url的测试Url,和测试结果说明
最新版本firefox又不支持此方法
var objectURL = window.URL.createObjectURL(this.files[0]);
得用这种方法获得图片的数据,在赋值给image的src
https://developer.mozilla.org/en/Using_files_from_web_applications#Example.3a_Using_object_URLs_to_display_images
jsp
<tr class="defaultBGColor"> <td class="editLabel">テーマファイル:</td> <td ><input type="file" name="theme_path" id="themePath"/> <font id="themepathFont" color="red">*</font></td> </tr>
js代码
var themePath=document.getElementById('themePath'); themePathDiy.value=themePath.files[0].getAsDataURL();//传到后台处理 //处理代码见下面的java代码
themePath是input file的id获得的var
java代码:
String fileData = request.getParameter("themePathDiy"); fileData=parse64Base(fileData);//+ public String parse64Base(String str){ String re=str.split(",")[1]; BASE64Decoder decoder=new BASE64Decoder(); try { byte[]b=decoder.decodeBuffer(re); return new String(b); }catch(Exception e){return null;} }
对于文件上传,新版本的浏览器对访问客户端内容设置了较高的权限。虽然现在有变相的 “解决办法”,但都需要用户在访问页面的时候,额外的进行浏览器的安全设置(允许Javascript脚本访问更多的本地内容),否则单靠Javascript还是无法直接进行访问。这就意味这我没有办法像以前那样去直接调用file input的value来进行图片的预览。
在新版本的浏览器中有提供nsIDOMFile这样一个接口,它提供了三个方法可以使用,分别是:
DOMString getAsBinary();
DOMString getAsDataURL();
DOMString getAsText(in DOMString encoding);
详细的资料看这裡:https://developer.mozilla.org/en/NsIDOMFile
我们这裡就是要使用getAsDataURL()这个方法,这个方法会返回一个data: URL类型的DOMString,它的内容就是文件经过编码后的数据了。也就是获得的文件的数据
下面是预览图片,利用上述方法的实现。。
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New file input tester.</title> </head> <body> <input id="myfile" type="file" /> <br /> <img src="" alt="Image to be upload." /> <div id="info"></div> <script type="text/javascript"> var dFile = document.getElementById('myfile'); var dImg = document.getElementsByTagName('img')[0]; var dInfo = document.getElementById('info'); dFile.onchange = function(){ if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');return;} if(dFile.files){ dImg.src = dFile.files[0].getAsDataURL(); }else if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1){ dImg.src = dFile.value; } } </script> </body> </html>
针对这个有下面解释
所谓"data"类型的Url格式,是在RFC2397中
提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个
点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持!
如:<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA.."/> 就可以显示为一张图片
data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是网页的内容。
这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。
data类型Url的形式
既然是Url,当然也可以直接在浏览器的地址栏中输入。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
在浏览器中输入以上的Url,会得到一个加粗的"Hello, world!"。也就是说,data:后面的数据直接用做网页的内容,而不是网页的地址。
注:Internet Explorer 不支持
简单的说,data类型的Url大致有下面几种形式。
引用
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,
data:text/html;base64,
data:text/css,
data:text/css;base64,
data:text/javascript,
data:text/javascript;base64,
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式。
data:text/plain,<文本数据>
data:text/html,
data:text/html;base64,
data:text/css,
data:text/css;base64,
data:text/javascript,
data:text/javascript;base64,
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
完整的语法定义
在RFC中,完整的语法定义如下。
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允许的字符,有些字符需要转义,例如"="要转义为"%3D",不过我测试下来,至少在Firefox里面,不转义也是可以的。
parameter可以对mediatype进行属性的扩展,常见的是charset,用来定义编码格式,在多语言情况下需要用到。例如下面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出"你好,中文!"。如果吧charset部分去掉,就会显示乱码,因为我用的是UTF-8编码。
Firefox有一个data类型Url的测试页面,列出了各种格式的data类型Url的测试Url,和测试结果说明
最新版本firefox又不支持此方法
var objectURL = window.URL.createObjectURL(this.files[0]);
得用这种方法获得图片的数据,在赋值给image的src
https://developer.mozilla.org/en/Using_files_from_web_applications#Example.3a_Using_object_URLs_to_display_images
发表评论
-
IE中的条件编译
2011-10-30 18:53 2080引用条件编译介绍 在IE有一个几乎没人知道的特性--“条件编 ... -
兼容IE和firefox,获得上传文件绝对路径
2011-10-17 09:59 6329firefox为了浏览器安全性,不能获得上传文件绝对路径。。d ... -
ClientAbortException: java.net.SocketException: Connection reset by peer: socke
2011-10-13 14:25 1描述下问题 tomcat报错 ClientAbortExc ... -
关于JavaScript中打印jsp对象的问题
2011-10-07 15:27 1350假如jsp页面里一个strTest的String对象,值为“m ... -
另类的实现逻辑问题
2011-10-07 11:23 1249转自http://www.ilovejs.net/archiv ... -
(转)实现Ajax请求队列按顺序执行
2011-10-07 10:23 5504摘自http://www.ilovejs.net/archiv ... -
摘抄--从function的定义看JavaScript的预加载
2011-09-28 10:59 1030http://www.nowamagic.net/librar ... -
关于无法delete文件
2011-09-26 17:12 1421File f=new File(targetDir+&qu ... -
js 自行函数
2011-09-19 16:46 1040有很多方法立即执行匿名函数,简单的整理就有下面三种的典型方式( ... -
IE和FF中获取兄弟节点
2011-09-16 14:26 1512function getNextNode(target){ ... -
设置有iframe的页面根据窗口大小自动调整大小
2011-09-16 14:24 3076有时页面会出现莫名的不能占满页面的情况 window.on ... -
js中style属性以及仿制window.alert()功能和自定义
2011-09-14 17:32 3645JS操作css 下面是引用的。。很不错的总结、、 引用 使用j ... -
css区分各个浏览器和css Hack
2011-09-07 16:29 1315<SCRIPT LANGUAGE="Jav ... -
HTML标签的<button>导致数据在firefox自动提交和在firefox里面弹出div窗口失败
2011-09-07 15:22 1793项目中遇到这么个问题 项目中想利用div制造弹出窗口的操作 c ... -
转:Div自适应高度
2011-08-04 14:49 1514由于设计页面需要,要把两个并排显示的div实现一样高的效果,n ... -
在eclipse里jsp编译后的java和class文件的位置
2011-08-03 14:08 10266eclipse版本不一样,位置也不一样 第一种:(网上搜到的) ... -
iframe的属性:document和Document以及Document的属性和iframe在各个浏览器获得内部文档的写法
2011-08-03 11:37 2113.document引用到是的 iframe所在页面对象, .D ... -
浏览器加载显示html的顺序
2011-08-02 15:36 2315其实浏览器加载显示html的顺序是按下面的顺序进行的: 1、I ... -
div+ajax实现类似iframe功能
2011-08-01 17:03 7848function showAtRight(url) { ... -
PreparedStatement setString 特殊字符乱码
2011-07-29 13:27 2249PreparedStatement setString 特殊字 ...
相关推荐
- 接着定义了上传文件的存储路径和文件名,并创建目标文件。 3. **文件读写**: - 定义了一个大小为10MB的字节数组用于存储文件内容。 - 使用`is.read(b)`读取文件内容到字节数组中。 - 通过循环将读取的数据...
标题 "兼容ie,Firefox的文件上传" 涉及的核心知识点是实现跨浏览器的文件上传功能,特别是针对Internet Explorer(IE)和Firefox这两个主流浏览器的兼容性问题。在Web开发中,由于不同浏览器对HTML、CSS和JavaScript...
标题 "Firefox XPI" 指的是 Firefox 扩展(Extension)的安装包格式,它是一种基于 ZIP 压缩的文件系统,用于分发和安装 Firefox 浏览器的插件。XPI 是 "XML-based Package Installer" 的缩写,这种格式允许开发者将...
### js判断上传文件的大小(兼容火狐、谷歌、IE、360浏览器) 在Web开发中,经常需要处理用户上传文件的操作。为了确保服务器安全并优化用户体验,开发者需要对上传文件进行一定的预处理,例如限制文件大小。本文将...
例如,对于不支持SWF的浏览器(如最新的Chrome、Firefox),可能需要提供PDF或其他格式的预览方式。 5. **安全性**:在线预览过程中,需要防止跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等网络安全问题。此外,...
在现代Web开发中,文件上传是一个常见的功能,但要实现跨浏览器兼容性,尤其是在旧版本的Internet Explorer(如IE6、IE7、IE8、IE9)以及Firefox、Chrome和世界之窗等其他浏览器上,可能面临一些挑战。Ajax上传文件...
它支持拖放操作,且与各种浏览器兼容,包括Internet Explorer、Firefox、Chrome、Safari等。 2. **基本使用** 要在项目中使用FileInput,首先需要引入Bootstrap CSS和JavaScript库,以及FileInput的CSS和JS文件。...
Firefox 不支持 click 方法的解决 Firefox 不支持 click 方法是因为 W3C 标准规定 click 方法只能赋予 input 元素。这意味着在 Firefox 浏览器中,不能使用 click 方法来触发非 input 元素的点击事件。 解决方法是...
之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,当有后台过滤和鉴权时,FireFox 不能正常上传。经过反复研究学习,最终实现了IE 和FireFox 兼容问题。之所以在有后台鉴权时firefox和360浏览器无法正常...
7. **发布与分发**:如何将完成的扩展上传到Firefox Add-ons Marketplace,以及获取用户反馈和更新扩展的过程。 8. **案例研究**:可能包含一些流行Firefox扩展的分析,如AdBlock Plus、uBlock Origin、NoScript等...
标题“firefox 7 download2”指的是Firefox浏览器的第7个版本的下载,这可能是对Firefox 7的一个讨论或资源分享。Firefox是由Mozilla公司开发的一款开源网络浏览器,以其强大的功能、可定制性和对用户隐私的重视而...
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题,这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer(IE6, IE7, IE8)对现代Web标准的支持不足,而...
- 将 .xpi 文件拖拽至 Firefox 浏览器窗口。 - 浏览器会识别出这是一个插件,并询问是否要安装。 - 点击“是”进行安装。需要注意的是,未经过官方验证的插件会有一个短暂的安全等待时间。 ##### 3. 发布流程 - **...
6. **跨浏览器支持**:ntko大文件上传控件兼容多种主流浏览器,包括IE、Firefox、Chrome、Safari等,确保在不同平台上的兼容性。 7. **API接口和事件驱动**:控件提供丰富的API接口和事件,开发者可以通过编程来...
例如,IE浏览器通常对新特性的支持较慢,而现代浏览器如Chrome和Firefox则更倾向于支持最新的Web标准。因此,为了确保在所有这些浏览器上都能正常工作,开发者可能使用了如HTML5 File API、jQuery、或者专门的多文件...
- **跨浏览器兼容**:Uploadify能很好地在多种浏览器(如Chrome、Firefox、Safari、IE等)中运行。 - **错误处理**:提供错误处理机制,对上传失败的文件进行提示和处理。 2. **工作原理** Uploadify基于Flash或...
1.主要功能经测试支持IE9以上,Chrome,FireFox;其他浏览器未测试; 2.文件上传部分:主要实现了文件的上传,进度条,多文件一起上传,上传前删除,上传失败后手动删除,上传失败自动重试,上传失败手动重试...
2. 文件上传机制安全:确保文件上传机制的安全,例如限制上传文件的类型和大小。 3. 权限配置:确保Web应用程序的权限配置正确,以防止恶意文件的上传。 五、WebShell 文件上传漏洞的检测方法 检测WebShell 文件...
10. **适应性**:为了适应不同的设备和浏览器,组件应具有良好的跨平台和跨浏览器兼容性,包括桌面端和移动端,以及主流的Chrome、Firefox、Safari、Edge等浏览器。 在下载说明.txt文件中,可能包含了组件的安装、...
SWFUpload是一个开源的Flash组件,它允许网页在不依赖浏览器特定控件(如IE的ActiveX或Firefox的NPAPI插件)的情况下实现文件的上传功能。这个技术结合了Flash的广泛兼容性和JavaScript的灵活性,使得文件上传在多种...