`

firefox上传文件

 
阅读更多
先看一个实例:
jsp

<tr class="defaultBGColor">
			   <td  class="editLabel">テーマファイル:</td>
				<td ><input type="file" name="theme_path" id="themePath"/>&nbsp<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以后,就可以支持任意形式的数据格式。
完整的语法定义
在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
分享到:
评论

相关推荐

    解决ajaxfileupload.js在IE9,firefox下文件超大无效

    - 接着定义了上传文件的存储路径和文件名,并创建目标文件。 3. **文件读写**: - 定义了一个大小为10MB的字节数组用于存储文件内容。 - 使用`is.read(b)`读取文件内容到字节数组中。 - 通过循环将读取的数据...

    兼容ie,Firefox的文件上传

    标题 "兼容ie,Firefox的文件上传" 涉及的核心知识点是实现跨浏览器的文件上传功能,特别是针对Internet Explorer(IE)和Firefox这两个主流浏览器的兼容性问题。在Web开发中,由于不同浏览器对HTML、CSS和JavaScript...

    firefox xpi

    标题 "Firefox XPI" 指的是 Firefox 扩展(Extension)的安装包格式,它是一种基于 ZIP 压缩的文件系统,用于分发和安装 Firefox 浏览器的插件。XPI 是 "XML-based Package Installer" 的缩写,这种格式允许开发者将...

    js判断上传文件的大小(兼容火狐、谷歌、IE、360浏览器)

    ### js判断上传文件的大小(兼容火狐、谷歌、IE、360浏览器) 在Web开发中,经常需要处理用户上传文件的操作。为了确保服务器安全并优化用户体验,开发者需要对上传文件进行一定的预处理,例如限制文件大小。本文将...

    文件上传并在线浏览

    例如,对于不支持SWF的浏览器(如最新的Chrome、Firefox),可能需要提供PDF或其他格式的预览方式。 5. **安全性**:在线预览过程中,需要防止跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等网络安全问题。此外,...

    真正实现ajax上传文件 兼容IE6789火狐谷歌世界之窗

    在现代Web开发中,文件上传是一个常见的功能,但要实现跨浏览器兼容性,尤其是在旧版本的Internet Explorer(如IE6、IE7、IE8、IE9)以及Firefox、Chrome和世界之窗等其他浏览器上,可能面临一些挑战。Ajax上传文件...

    bootstrap 文件上传组件 fileinput 实现文件批量上传

    它支持拖放操作,且与各种浏览器兼容,包括Internet Explorer、Firefox、Chrome、Safari等。 2. **基本使用** 要在项目中使用FileInput,首先需要引入Bootstrap CSS和JavaScript库,以及FileInput的CSS和JS文件。...

    Firefox不支持click方法的解决

    Firefox 不支持 click 方法的解决 Firefox 不支持 click 方法是因为 W3C 标准规定 click 方法只能赋予 input 元素。这意味着在 Firefox 浏览器中,不能使用 click 方法来触发非 input 元素的点击事件。 解决方法是...

    java版 jquery uploadify 通过Flash实现多文件上传 IE 和FireFox 兼容

    之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,当有后台过滤和鉴权时,FireFox 不能正常上传。经过反复研究学习,最终实现了IE 和FireFox 兼容问题。之所以在有后台鉴权时firefox和360浏览器无法正常...

    My Firefox Addons

    7. **发布与分发**:如何将完成的扩展上传到Firefox Add-ons Marketplace,以及获取用户反馈和更新扩展的过程。 8. **案例研究**:可能包含一些流行Firefox扩展的分析,如AdBlock Plus、uBlock Origin、NoScript等...

    firefox 7 download2

    标题“firefox 7 download2”指的是Firefox浏览器的第7个版本的下载,这可能是对Firefox 7的一个讨论或资源分享。Firefox是由Mozilla公司开发的一款开源网络浏览器,以其强大的功能、可定制性和对用户隐私的重视而...

    兼容IE6,IE7,IE8和Firefox的图片上传预览效果

    标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题,这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer(IE6, IE7, IE8)对现代Web标准的支持不足,而...

    firefox插件开发教程

    - 将 .xpi 文件拖拽至 Firefox 浏览器窗口。 - 浏览器会识别出这是一个插件,并询问是否要安装。 - 点击“是”进行安装。需要注意的是,未经过官方验证的插件会有一个短暂的安全等待时间。 ##### 3. 发布流程 - **...

    ntko 大文件上传控件的文档

    6. **跨浏览器支持**:ntko大文件上传控件兼容多种主流浏览器,包括IE、Firefox、Chrome、Safari等,确保在不同平台上的兼容性。 7. **API接口和事件驱动**:控件提供丰富的API接口和事件,开发者可以通过编程来...

    国外的多文件上传带预览(支持IE、火狐、谷歌、opera)

    例如,IE浏览器通常对新特性的支持较慢,而现代浏览器如Chrome和Firefox则更倾向于支持最新的Web标准。因此,为了确保在所有这些浏览器上都能正常工作,开发者可能使用了如HTML5 File API、jQuery、或者专门的多文件...

    多文件上传插件uploadify

    - **跨浏览器兼容**:Uploadify能很好地在多种浏览器(如Chrome、Firefox、Safari、IE等)中运行。 - **错误处理**:提供错误处理机制,对上传失败的文件进行提示和处理。 2. **工作原理** Uploadify基于Flash或...

    基于Java的的文件图片上传-分片上传-断点续传-秒传java源码.zip

    1.主要功能经测试支持IE9以上,Chrome,FireFox;其他浏览器未测试; 2.文件上传部分:主要实现了文件的上传,进度条,多文件一起上传,上传前删除,上传失败后手动删除,上传失败自动重试,上传失败手动重试...

    WebShell文件上传漏洞分析溯源

    2. 文件上传机制安全:确保文件上传机制的安全,例如限制上传文件的类型和大小。 3. 权限配置:确保Web应用程序的权限配置正确,以防止恶意文件的上传。 五、WebShell 文件上传漏洞的检测方法 检测WebShell 文件...

    ntsky文件上传组件

    10. **适应性**:为了适应不同的设备和浏览器,组件应具有良好的跨平台和跨浏览器兼容性,包括桌面端和移动端,以及主流的Chrome、Firefox、Safari、Edge等浏览器。 在下载说明.txt文件中,可能包含了组件的安装、...

    swfupload文件上传下载

    SWFUpload是一个开源的Flash组件,它允许网页在不依赖浏览器特定控件(如IE的ActiveX或Firefox的NPAPI插件)的情况下实现文件的上传功能。这个技术结合了Flash的广泛兼容性和JavaScript的灵活性,使得文件上传在多种...

Global site tag (gtag.js) - Google Analytics