天天看點
傳回

Firefox3.6 對多檔案選擇、上載和精确進度條的支援

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

Firefox 3.6支持一次选择多个文件。选择多个文件，只需在input中添加 multiple="true" 属性即可，写法如下：<input type="file" id="input" multiple="true" οnchange="handleFiles(this.files)" />

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

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

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

<!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" οnchange="handleFile(this)" />

<input type="file" multiple="true" οnchange="handleFile(this)" />

</body>

</html>

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

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

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());

}

 

Firefox3.6 下载地址：

http://www.mozilla.com/en-US/firefox/all.html

javascript Firefox xmlhttprequest function mozilla file input
上一篇: mysql assertion_A solution for MySQL Assertion failure FIL_NULL
下一篇: Android可拖拽控件的實作，同時解決和onClick事件的沖突問題

繼續閱讀