文件的上传与下载、图片的上传和读取
这几天一直在做报表模块。做报表的过程中,需要上传本地CSV格式文件,以供后端解析,从而批量导入数据;同时,也需要从后端下载文件(格式多种:有CSV,PDF,以及JSON),用于本地浏览。 上传文件:文件的上传基本都是采用?<input??type="file"? id="upload_files" name="upload_files"/>。通过?type="file"打开本地文件夹进行文件的选取(期间这个原理,没闹明白),文件选取完成后,就可以直接提交form表单或者获取文件数据发送后端了。这期间试过几种方式,最后选了一个。 <!--第一种:直接form表单提交。这种方式好处:在于不需要另外编写数据提交方法,简单、快速; 坏处:在于form表单提交后,页面会跳转到form表单的action链接上,虽然自动跳转可以避免,但是还是需要另外编写方法,同时数据不好处理--> <form id="uploadForm" action="http://192.168.0.120:9090/lampinfo/device/importCsv" enctype="multipart/form-data" method="post"> <input type="file" id="upload_files" name="upload_files"/> <input id="data_upload_button" type="submit" value="Upload"/> </form> <!--第二种:将文件的选择和数据提交分开。这种方式好处:文件选择后,在文件选择的后面,能清楚知道选择的是哪个文件。 数据单独提交,便于对数据的封装和处理。同时在采用ajax异步提交数据后,界面不会切换;坏处:在于文件选择、数据提交是分开进行,在操作上有些繁琐。--> <form id="uploadForm" enctype="multipart/form-data" style="width: 45px;height: 26px"> <input type="file" id="upload_files" name="upload_files"/> </form> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" ng-click="saveReport()"> <i class="fa fa-cloud-upload" style="font-size: 14px"></i> </button> /*** * 功能:文件上传,格式不限 * 说明:FormData 对象是XMLHttpRequest 2级定义的,它为序列化表单以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。 * 利用 FormData 对象,可以通过对象键值对来模拟一系列表单格式的数据,以前上传文件需要用form表单封装起来(即和后端约定一个数据传输格式),现在FormData对象就是按照规定的格式,把form表单中所有表单元素的name与value组装成一个queryString,省去了手工拼接的工作。 导出文件:前端通过模拟表单,用浏览器将文件导出来。当然在导出文件之前后端需要根据查询参数查询到正确数据后,建立一个内容格式正确的文件! * * 功能:导出文档,文档下载 * 把CSV文件上传到后端之后,那么前端就算是完事了,至于后端怎么玩的,我们不管;接下来就是导出文件了,相比于上传文件,导出文件就相当简单了。 * 前端将需要查询数据的参数发送到后端,后端根据参数将需要的数据查询出来以后,按固定格式生成CSV,PDF等格式的文件(生成PDF文件时,如果需要展示报表的图形界面,则前端需要将报表图形转换成base64位编码发送给后端,后端自己解析编码并完成构图), * 接下来就是文件导出了。注意:由于ajax请求下载的时候,后端是以数据流的形式将文件数据返回回来,那么前端就无法获取到固定格式的文件(就是一串编码)。 * 这时候又该表单上场了,我们以模拟表单的方式,将文件导出来。模拟表单就是在页面上新建一个from表单,然后将该表单添加到页面的随意一个节点下(此处直接挂载在了body下,当然它是隐藏的,界面上不会显示),然后通过form表单的submit方法,通过浏览器将文件导出来。 $scope.export = var parameter = {}; 查询数据的参数 $http({ url: url,查询数据,后端生成文件的链接,不是下载链接。 method: "POST" },data: parameter,1)">false超时设置为15秒 }).then( (response) { if (response.data.message == "success") { var downloadtype = "",value = ""; if ($scope.inside.exportType == "pdf") { downloadtype = "PDF"; } else { downloadtype = "CSV"; value = parameter.name + ".csv"; } $("body").find(".download").remove(); var $eleForm = $("<form method='POST' class='download'><input type='hidden' name='csvFileName'></form>"); $eleForm.attr("action",$scope.inside.STL_Inventory + "/lampinfo/deviceStatusReport/export" + downloadtype); //文件导出链接在这 $("body").append($eleForm); $("body").find("input[name='csvFileName']").attr("value"通过表单submit方法,模拟表单将文件导出 } { Confirmation.confirm("Export Failed!","OK"); } }).catch( (response) { Confirmation.confirm("Export Failed!",1)">); }); }; ? ? 在完成了文件的上传和导出以后,接下来就是图片的上传和下载。 * * 功能:选择图片,获取本地图片的base64位编码 * 这应该是文件上传的第三种方式:前两种都是显视 type='file',这一种是模拟一个表单。将type='file'封装在方法内部,避免了type='file' 显视显示,出现样式上的不协调 * 在方法内新建一个表单(当然样式是隐视的),然后将该表单添加到页面的随意一个节点下(此处还是直接挂载在了body下),然后自点击一下,通过自点击打开 type='file',进行图片的选取。 * 需要注意的是:在方法的最后面需要将这个挂载上去的节点移除,不然添加的图片永远都是第一次添加的那张。 $scope.addPicture = var file = $("<input type='file' name='file' id='file'>"),form = $("<form id='uploadForm' class='uploadfile' enctype='multipart/form-data' style='display: none'></form>"); file.appendTo(form); $("body").append(form); file.click(); 自点击表单 type='file' file.change(function () { 图片更换执行回调方法 var file = document.getElementById("file").files[0]; if (!/image/w+/.test(file.type)) //判断获取的是否为图片文件,jpg和png格式 { Confirmation.confirm("请确保文件为图像文件!","OK"); return false; } var reader = FileReader(); reader.readAsDataURL(file); 将文件读取为DataURL,读取的内容是加密以后的本地文件路径 reader.onload = function (e) { 文件读取成功完成后,执行方法;其读取回的所有数据都在事件对象e内 $scope.inside.pictureList.push({"deviceType":"LampPoleModel","picture": e.target.result}); $("#buttonList img").eq(0).click(); }; $("body").find(".uploadfile").remove(); //在方法的最后面需要将这个挂载上去的节点移除,不然添加的图片永远都是第一次添加的那张 * 这里需要介绍下FileReader对象(免得下次读代码,又要去度娘) * FileReader:是window对象的一个构造函数,用于读取文件选择标签(type='file')选择的File的Dom对象。即用来把文件选择的信息读入内存,并且读取文件中的数据。 * 其接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。 * 为了安全FileReader可以读取表单上已经选择的文件,不能读取本地文件,它以二进制信息的方式读取表单文件:主要用于大文件的信息读取。 * 特点:1、读取后,二进制信息在浏览器内存中,批量的向服务器进行传输。2、一般要配合后台程序,第三方插件共同完成,3、断点下载和断点上传 * * FileReader接口有5个方法,其中4个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会直接返回读取结果,这一结果存储在result属性中。 * FileReader接口的方法: * 方法名 参数 描述 readAsArrayBuffer file 将文件读取为一个ArrayBuffer对象以表示所读取文件的内容. readAsBinaryString file 将文件读取为二进制编码 readAsText file,[encoding] 将文件读取为文本 readAsDataURL file 将文件读取为DataURL,读取的内容是加密以后的本地文件路径 abort (none) 终端读取操作 * * FileReader接口事件:FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。 FileReader接口的事件: 事件 描述 onabort 中断 onerror 出错 onloadstart 开始 onprogress 正在读取 onload 成功读取 onloadend 读取完成,无论成功失败 }); }; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- shell && and ||
- angular – 由typescript导入的代码的Typescript类型?
- angularjs – $http:如何使用CORS从WebApi获取头文件名
- 如何获取angular2组件的父DOM元素引用
- angularjs – 如何使用Typescript将ui-router stateProvide
- angularjs – Karma jasmine angular ui router – 使用par
- shell – node.js – 向子进程发送密钥快捷方式
- scala – 如何将RDD保存到HDFS中,然后再将其读回?
- scala – 是一种方法还是类?
- 使用代码生成工具Database2Sharp快速生成工作流模块控制器和