HTML5 Blob 实现文件下载功能的示例代码_html5教程技巧

来源:脚本之家  责任编辑:小易  

Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipart/form-data,但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时,你发送给它一个字节流,所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器,在这个过程一直在不断的进行文件的上传。这种方式运行的非常好,不像Flash上传那这样充满了问题(特别是处理大文件上传的时候),然而这种方法是相当复杂的并且听起来不容易理解,因为你本质上是接管了整个服务器端的处理(获取字节流的时候)同时包括了在服务器端实现multipart/form-data协议,伴随一系列的其他事情。使用Html5 上传文件XMLHttpRequest 在Html5 规范中已经有全新的变化,规定了XMLHttpRequest Level 2规范(目前最新版本)包含下列新的特性:处理字节流,例如作为上传或者下载的File,Blob,FormData对象上传或者下载中的进度事件跨站点请求允许创建匿名请求可以设置请求超时在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常,上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户,需要注意的是这种方式解决了不需要服务器端做任何改变,至少是目前处理multipart/form-data协议。所以服务器端的处理逻辑保留不变,这使得开发者适应这种技术相当容易。图1:文件上传画面-准备上传 图2:显示上传完成画面注意:上面的图片中,信息提示区域是提供给用户的:当前选中文件的信息文件名文件大小文件类型上传完成多少的百分比进度条上传速度或者上传带宽距离上传完成大概还有多长时间已上传文件大小服务器端的响应上面第6项或许看起来不重要,但事实上是相当重要的。因为我们用XMLHttpRequest,上传发生在后台,页面没有发生跳转等任何变化,所以对于你用它处理其他一些事情来说是一个非常好的特性。Html5 Progress Event对于Html5 Progress Events规范,Html5 Progess Events提供了下列与本次讨论相关的信息total-总的字节数loaded-到目前为止上传的字节数lengthComputable-可计算的已上传字节请注意到我们需要用两个信息去计算要显示给用户的其他所有信息。要计算出来其他的信息通过上面我们得到信息是相当容易的,但是那需要一些额外的代码并且创建一个定时器。Html5 Progress Event 应该是什么考虑到有一部分人想更好的提供给用户所有的信息,所以Html5 Progress Event应该更好的满足需要,因为它给浏览器供应商提供这些额外信息是相当简单的,所以建议progress event应该修改成如下:total-总的字节数loaded-到目前为止上传的字节数lengthComputable-可计算的已上传字节transferSpeed long类型timeRemaining JavaScript 日期对象Html5 上传 用XMLHttpRequest浏览器支持情况支持这一特性的浏览器最低版本Firefox 4.0 beta 6Chrome 6Safari 5.02IE 9 Beta and Opera 10.62 不支持这一特性简单的示例下面是一个完整的Html页面包含了实现文件上传并带有进度提示的JavaScript代码,只是实现了基本的功能,感兴趣的可以自己做扩展。需要吧上传接口修改成自己服务的。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566DOCTYPEhtml>Upload Files using XMLHttpRequest-Minimalfunction fileSelected(){var file=document.getElementById('fileToUpload').files[0];if(file){var fileSize=0;if(file.size>1024*1024)fileSize=(Math.round(file.size*100/(1024*1024))/100).toString()+'MB';elsefileSize=(Math.round(file.size*100/1024)/100).toString()+'KB';document.getElementById('fileName').innerHTML='Name:'+file.name;document.getElementById('fileSize').innerHTML='Size:'+fileSize;document.getElementById('fileType').innerHTML='Type:'+file.type;}}function uploadFile(){var fd=new FormData();fd.append("fileToUpload",document.getElementById('fileToUpload').files[0]);var xhr=new XMLHttpRequest();xhr.upload.addEventListener("progress",uploadProgress,false);xhr.addEventListener("load",uploadComplete,false);xhr.addEventListener("error",uploadFailed,false);xhr.addEventListener("abort",uploadCanceled,false);xhr.open("POSTwww.zgxue.com防采集请勿采集本网。

原理其实很简单,就是将文本或者JS字符串信息(即后台返回来的在服务器上没有具体路径的动态文件,如导出数据功能)借助Blob转换成二进制,然后,作为 a 标签的 href 属性,配合download属性,实现下载功能,缺点是如果文件太大会下载失败。

后端code upload=new Upload($_FILES['file']['tmp_name'],$_POST['blob_num'],$_POST['total_blob_num'],$_POST['file_name'],$_POST['md5_file_name']);upload->apiReturn();

下面是导出数据的一个实例:

这种事情,需要分成两步来做。首先在JSP中,生成img标签,类似: 其次是写一个Servlet(或JSP),可以通过指定的ID查询到图片的Blob字段信息;先设置response的contentType为图片类型,如:image/JPEG

$("#exportAll").on("click",function(){ //点击【全部导出】 //layer.load(); var province = $('#operatingData select[name=\'province\'] option:selected').val(); //查询条件(省) var city = $('#operatingData select[name=\'city\'] option:selected').val(); //查询条件(市) var url = '/xxx/excelAllDownload'; //【全部导出】请求url var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.responseType = "blob"; //返回类型blob xhr.onload = function () { //定义请求完成的处理函数 //layer.closeAll('loading'); if (this.status === 200) { var blob = this.response; var reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href reader.onload = function (e) { var a = document.createElement('a'); // 转换完成,创建一个a标签用于下载 a.download = 'XX数据.xlsx'; a.href = e.target.result; $("body").append(a); // 修复firefox中无法触发click a.click(); $(a).remove(); } }else if(this.status === 504){ alert('导出失败,请求超时'); //layer.msg('导出失败,请求超时', {icon: 2}); }else{ alert('导出失败'); //layer.msg('导出失败', {icon: 2}); } }; xhr.send("province=" + province + "&city=" + city);})

html前端代码: enctype=\"multipart/form-data\"> 文件名: 提交\"/> 如果是ubuntu上部署apache2,你应该是php开发者吧,action=\"upload-file.php 中的upload-file.php改

上面是在服务器动态生成excel文件时使用的下载方式,因为对应的 URL 并不存在,我们就不能简单的指定 href 属性。

3.引用dbms_lob编辑大字段,c_content是你的文件内容 DBMS_LOB.OPEN(b_content,DBMS_LOB.LOB_READWRITE);DBMS_LOB.WRITE(b_content,n_length,1,UTL_RAW.cast_to_raw(c_content));DBMS_LOB.CLOSE(b_content

但是不同浏览器对 Blob (类文件对象)有不同的大小限制,这种借助Blob转换成二进制 实现下载功能的方式并不能导出数据量过多的数据到excel文件(即不能下载太大的文件),且有兼容性问题。

(this);[]\"multiple=\"multiple\"required=\"required\"/> function fileCountCheck(objForm){ 参考资料:百度百科 html5 百度百科 File(计算机术语) 百度百科 javascript

所以,我们可以通过 JavaScript 对服务器发出一个请求,通知它去生成某个文件,然后把对应的 URL 返回给客户端。代码如下:(此时的请求结果为一个已经存在于服务器上面的静态文件的路径)

$("#exportAll").on("click",function(){ //点击【全部导出】 var url = '/xxx/excelAllDownload'; //【全部导出】请求url var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.responseType = "blob"; //返回类型blob xhr.onload = function () { //定义请求完成的处理函数 if (this.status === 200) { //方式一实现静态文件下载,不能自定义下载文件名字 //location.href = "json/abc.xlsx"; //this.response(返回的服务器上的静态文件路径) //方式二实现静态文件下载,可以自定义下载文件名字 var a = document.createElement('a'); //创建a标签用于下载 a.download = 'XXX数据.xlsx'; a.href = "json/abc.xlsx"; //this.response(返回的服务器上的静态文件路径) $("body").append(a); // 修复firefox中无法触发click a.click(); $(a).remove(); }else if(this.status === 504){ alert('导出失败,请求超时'); }else{ alert('导出失败'); } }; xhr.send();})

很简单。var files=document.getElementsByName('picfile').files,fs=files.length,s=0;if(fs>10){ alert("上传的文件数量超过10个了!请重新选择!}else{ for(var i=0;i 1024*1024){ alert('"'+files[i].name+"这个文件大于1M内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 深入解析html5中的blob对象的使用
  • html5下讲一个很大的二进制文件怎么传入blob的第一个参数
  • 如何在手机浏览器中运用HTML5的文件API实现上传多图功能
  • HTML5的audio标签能播放文件流吗
  • html5 打开本地文件夹
  • html5 大文件分片上传处理如何实现?
  • Blob类型怎么在html中显示
  • html上传文件代码
  • oracle BLOB上传文件
  • js获取HTML5 多文件file选择的数量
  • java中怎样将blob文件内容显示在页面上
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5blob文件下载深入解析html5中的blob对象的使用html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved