网站导航网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
当前位置: 网学 > 设计资源 > .Net编程 > 正文

Firefox3.6对多文件选择、上载和精确进度条的支持

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务

Firefox 3.6 于 2010年1月22日正式发布,该版本对CSS3和HTML5提供了更多的支持,在 HTML5 方面,提供对访问本地的支持和多文件选择。同时还支持简单拖放操作即可完成。遵守W3C规范的浏览器对Web开发人员来说,是一个最好的喜讯,Firefox每一次小小的更新,都会给大家带来一份惊喜。下面就简单介绍下Firefox3.6对文件上传支持的新功能。
Firefox 3.6支持一次选择多个文件。选择多个文件,只需在input中添加 multiple="true" 属性即可,写法如下:

XML/XHTML 代码
<input type="file" id="input" multiple="true" onchange="handleFiles(this.files)" />

在用户选择多个文件后,handleFiles函数可以通过FileList对象得到所选择的每个File对象。

通过拖放操作实现文件的多选,只需要先定义一个可拖放的区域,然后添加,dragenter、dragover和drop事件,在drop事件里,可以通过 e.dataTransfer.files 得到所选择的文件集合。

对于每一个文件对象,可以通过name属性得到文件名,size属性得到文件的大小,type属性得到文件的MIME 类型,可以使用FileReader对象读取文件的内容。比如,下面的例子是得到文件名、文件大小和文件类型的:

XML/XHTML 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title></title>
    
<script type="text/javascript">
      function handleFile(f) {
        var files = f.files;
        var result = "";
        for (var i = 0; i
< files.length; i++) {
          result +
= "文件名:" + files[i].name + "\r\n";
          result +
= "文件大小:" + files[i].size + "\r\n";
          result +
= "文件类型:" + files[i].type + "\r\n";
          result +
= "\r\n------------------------------\r\n\r\n";
        }
        alert(result);        
      }    
    </script
>
</head>
<body>
<input type="file" onchange="handleFile(this)" />
<input type="file" multiple="true" onchange="handleFile(this)" />
</body>
</html>

注意:这里判断文件类型的依据好像还是以扩展名来判断的,也就是说是可以通过修改扩展名来伪装的。

另外,还可以通过XMLHttpRequest对象属性文件的上载,通过progress事件可以显示上载的准确进度,下面是 mozilla 网站提供的一个上载的例子:

JavaScript 代码
function FileUpload(img, file) {
  
this.ctrl = createThrobber(img);
  
var xhr = new XMLHttpRequest();
  
this.xhr = xhr;
  
  
var self = this;
  
this.xhr.upload.addEventListener("progress", function(e) {
        
if (e.lengthComputable) {
          
var percentage = Math.round((e.loaded * 100) / e.total);
          self.ctrl.update(percentage);
        }
      },
false);
  
  xhr.upload.addEventListener(
"load", function(e){
          self.ctrl.update(
100);
          
var canvas = self.ctrl.ctx.canvas;
          canvas.parentNode.removeChild(canvas);
      },
false);
  
  xhr.open(
"POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
  xhr.overrideMimeType(
'text/plain; charset=x-user-defined-binary');
  xhr.sendAsBinary(file.getAsBinary());

 Firefox 3.6下载地址:http://www.mozilla.com/en-US/firefox/all.html

设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问:王律师