lz12366
- 浏览: 412789 次
- 性别:
- 来自: 济南
-
文章分类
最新评论
-
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 2040引用条件编译介绍 在IE有一个几乎没人知道的特性--“条件编 ... -
兼容IE和firefox，获得上传文件绝对路径
2011-10-17 09:59 6283firefox为了浏览器安全性，不能获得上传文件绝对路径。。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 1317假如jsp页面里一个strTest的String对象，值为“m ... -
另类的实现逻辑问题
2011-10-07 11:23 1221转自http://www.ilovejs.net/archiv ... -
（转）实现Ajax请求队列按顺序执行
2011-10-07 10:23 5464摘自http://www.ilovejs.net/archiv ... -
摘抄--从function的定义看JavaScript的预加载
2011-09-28 10:59 993http://www.nowamagic.net/librar ... -
关于无法delete文件
2011-09-26 17:12 1387File f=new File(targetDir+&qu ... -
js 自行函数
2011-09-19 16:46 1000有很多方法立即执行匿名函数，简单的整理就有下面三种的典型方式（ ... -
IE和FF中获取兄弟节点
2011-09-16 14:26 1474function getNextNode(target){ ... -
设置有iframe的页面根据窗口大小自动调整大小
2011-09-16 14:24 3041有时页面会出现莫名的不能占满页面的情况 window.on ... -
js中style属性以及仿制window.alert()功能和自定义
2011-09-14 17:32 3609JS操作css 下面是引用的。。很不错的总结、、 引用 使用j ... -
css区分各个浏览器和css Hack
2011-09-07 16:29 1277<SCRIPT LANGUAGE="Jav ... -
HTML标签的<button>导致数据在firefox自动提交和在firefox里面弹出div窗口失败
2011-09-07 15:22 1757项目中遇到这么个问题 项目中想利用div制造弹出窗口的操作 c ... -
转：Div自适应高度
2011-08-04 14:49 1467由于设计页面需要，要把两个并排显示的div实现一样高的效果，n ... -
在eclipse里jsp编译后的java和class文件的位置
2011-08-03 14:08 10199eclipse版本不一样，位置也不一样 第一种：（网上搜到的） ... -
iframe的属性：document和Document以及Document的属性和iframe在各个浏览器获得内部文档的写法
2011-08-03 11:37 2002.document引用到是的 iframe所在页面对象， .D ... -
浏览器加载显示html的顺序
2011-08-02 15:36 2273其实浏览器加载显示html的顺序是按下面的顺序进行的： 1、I ... -
div+ajax实现类似iframe功能
2011-08-01 17:03 7810function showAtRight(url) { ... -
PreparedStatement setString 特殊字符乱码
2011-07-29 13:27 2216PreparedStatement setString 特殊字 ...
相关推荐
在后台加上即可解决IE9，firefox下面的问题： HttpServletResponse response =ServletActionContext.getResponse(); response.setContentType("text/html");
之前上传了一个通过Flash实现多文件上传，但是在IE正常运行，当有后台过滤和鉴权时，FireFox 不能正常上传。经过反复研究学习，最终实现了IE 和FireFox 兼容问题。之所以在有后台鉴权时firefox和360浏览器无法正常...
js判断上传文件的大小（兼容火狐、谷歌、IE、360浏览器）
NULL 博文链接：https://zyj0021.iteye.com/blog/1125782
真正实现ajax上传文件 兼容IE6789火狐谷歌世界之窗
由于项目需要，在网上找了一个JS判断上传文件大小的程序，经测试兼容IE6-9，Firefox10,Opera11.6,safari5.1,chrome17
客户端完全基于JavaScript的浏览器文件上传器，不需要任何浏览器插件，但需要和jQuery框架协同工作，支持超大文件上传，其算法是将一个超大文件切片成N个数据块依次提交给服务端处理，由服务端存储断点信息实现断点...
本程序是利用3.x的Firefox浏览器可以读取本地文件的特性，实现通过xmlHttPRequest上传大文件功能，并在可以上传过程中动态显示上传进度。略加修改，并与服务器端配合，可以实现断点续传等诸多功能。本例主要是研究...
uploadify jsp上传附件火狐浏览器不兼容丢失session问题，Uploadify v3.2
o 在FireFox中，如果窗口的滚动条没有回滚到顶部，那么Flash无法加载 o Race-conditions when files are cached * 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标，将UI分离以交给开发人员控制和...
eWebEditor V7.0 版发布，新增支持FireFox(火狐)、Chrome(谷歌)浏览器。新增超级多文件分块上传、G级大文件上传解决方案。内核全部重写。完美对话框界面。增强的多插件媒体插入支持、选项卡、代码格式化、保护模式、...
4. 文件上传，可以一次按顺序上传多个超大文件。 5. 组件完全采用多线程方式上传，达到更高性能。 6. 支持进度事件信息及百分比显示。 7. 支持简洁高效的JAVASCRIPT编程接口。 8. 支持过滤文件大小，文件总数量，...
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
Firefox 离线安装文件，版本57.0.1，可执行.exe文件号83.0，上传时为最新，大小54M，方便网络不行的朋友
html上传视频文件video预览（不支持多文件预览，在ie及火狐下测试好使，其他游览未测试，纯js 不用引入插件 ）
jQuery文件上传插件(支持拖动上传) ie10 firefox
1.主要功能经测试支持IE9以上，Chrome，FireFox；其他浏览器未测试； 2.文件上传部分：主要实现了文件的上传，进度条，多文件一起上传，上传前删除，上传失败后手动删除，上传失败自动重试，上传失败手动重试...
xhEditor编缉器，用于java开发时，上传文件，同时解决了在火狐上使用时报错的问题，主要是因为火狐上传时使用的是HTML5,如何解决请花1分吧！！ 记得把xheditor里的上传改成servlet的路径呀！！
Ajax文件上传 js上传 异步上传 兼容IE chrome Firefox
这是一个用java写的简单地文件上传(逻辑有点儿乱、需完善)、文件下载的demo，在文件下载中解决了下载文件标题乱码的问题，文件下载的乱码在ie,firefox, google chrome中已经测试过