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="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]

firefox上传文件相关推荐

IE和firefox上传文件mime类型的设置
php上传文件mime类型问题....... php上传文件支持的mime类型在不同的浏览器下是有差异的.先附上两个浏览器下支持的文件类型如下: 史上最完全oophper亲测版php文件上传之文件类型 ...
解决使用FireFox下Flash上传文件时SESSION丢失的问题(swfupload)
解决使用FireFox下Flash上传文件时SESSION丢失的问题(swfupload) 这几天在项目中遇到的问题,稍微整理一下. HTML 表单是我们常用来进行浏览器与服务器数据交互的途径,除了传 ...
ajaxFileUpload plugin上传文件 chrome、Firefox中出现SyntaxError:unexpected token
使用ajaxFileUpload上传文件时遇到的一些问题,原本在本地用IE8测试一切正常.. 1.然后QA用Chrome测试之后说不能上传文件,报错(文件名获取) HTML 代码: <table ...
html web上传文件原理,Web上传文件的原理及实现
本文为原创,如需转载,请注明作者和出处,谢谢! 现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Stru ...
jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
python selenium 文件上传_Python+Selenium学习--上传文件
场景文件上传操作也比较常见功能之一,上传功能操作webdriver 并没有提供对应的方法,关键上传文件的思路. 上传过程一般要打开一个系统的window 窗口,从窗口选择本地文件添加.所以,一般会卡 ...
html上传文件与后台处理,关于前端html图片和文件上传和后台接收方法
前些时间项目和h5交互时涉及到了文件上传的一个功能,但是h5在写上传的时候总是上传不上,所以花时间专门看了下web端的文件上传记录下. 第一种是前端写的,拿来修改了下,这种方法在上传的时候需要用到jq ...
使用AngularJS上传文件
本文翻译自:File Upload using AngularJS Here is my HTML form: 这是我的HTML表单: <form name="myForm" ...
EXTJS+ASP.NET上传文件带实时进度条代码
一,文件夹二,upLoad.cs是继承IHttpModule的类: usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usin ...

firefox上传文件

firefox上传文件相关推荐

最新文章

热门文章