Firefox支持多文件选择、ajax无刷新上载
Firefox 3.6 于 2010年1月22日正式发布,该版本对CSS3和HTML5提供了更多的支持,在 HTML5 方面,提供对访问本地的支持和多文件选择。同时还支持简单拖放操作即可完成。遵守W3C规范的浏览器对Web开发人员来说,是一个最好的喜 讯,Firefox每一次小小的更新,都会给大家带来一份惊喜。下面就简单介绍下Firefox3.6对文件上传支持的新功能。
Firefox 3.6支持一次选择多个文件。选择多个文件,只需在input中添加 multiple="true" 属性即可,写法如下:
在用户选择多个文件后,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" onchange="handleFile(this)" /> <input type="file" multiple="true" onchange="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()); }
来源:http://blog.csdn.net/net_lover/article/details/5222971
加支付宝好友偷能量挖...