先看一个实例:
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="https://img-blog.csdnimg.cn/2022010613554083881.jpeg"/> 就可以显示为一张图片
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大致有下面几种形式。
[quote]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图片数据
[/quote]因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式。
完整的语法定义
在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
[url]https://developer.mozilla.org/en/Using_files_from_web_applications#Example.3a_Using_object_URLs_to_display_images[/url]
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="https://img-blog.csdnimg.cn/2022010613554083881.jpeg"/> 就可以显示为一张图片
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大致有下面几种形式。
[quote]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图片数据
[/quote]因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式。
完整的语法定义
在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
[url]https://developer.mozilla.org/en/Using_files_from_web_applications#Example.3a_Using_object_URLs_to_display_images[/url]