文件的上传与下载、图片的上传和读取
这几天一直在做报表模块。做报表的过程中，需要上传本地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，省去了手工拼接的工作。
* JQ里面有个表单序列化的函数，FormData对象的作用和它是一样的。 * FormData对象还提供了更多的操作方法，但全部都在其原型对象中，自己本身没任何的属性及方法。同时还可以使用 XMLHttpRequest的send()方法来异步提交表单。与普通的Ajax相比，使用FormData的最大优点就是可以异步上传二进制文件。 * 由于FormData是 XMLHttpRequest Level 2 新增的接口，现在 低于IE10 的IE浏览器不支持 FormData */ $scope.saveReport = function () { var formData = new FormData(); //新建一个FormData对象实例 /* 调用append方法添加数据，参数两个，以键值对形式，相当于手工拼接。此处将文件添加到表单对象里*/ formData.append('upload_files', $('#upload_files')[0].files[0]); /* 也可以直接把form表单作为参数传递给FormData对象。new FormData的参数是一个DOM对象(即一个DOM节点)，而非jQuery对象；这两种方式也可以混用*/ var uploadForm = document.getElementById("uploadForm"); var formData = new FormData(uploadForm); formData.append('data', "fengling");
/* 注意通过JQ ajax提交数据的时候，属性设置有讲究 */ $.ajax({ url: url, type: 'POST', cache: false, //不缓存 data: formData, //上传formData封装的数据 processData: false, //告诉jQuery不要去处理发送的数据 contentType: false //告诉jQuery不要去设置Content-Type请求头 }).done(function (res) { layer.msg("File upload or data interpretation failed!", { //layer.msg是 layer插件 的一个信息提示模板。此处用来提示用户文件上传成功 area: ['600', '70px'], icon: 1, time: 2000, //2秒关闭（如果不配置，默认是3秒） anim: 6, skin: 'customStyle' }); }).fail(function (res) { layer.msg("File upload or data interpretation failed!", { //layer.msg是 layer插件 的一个信息提示模板。此处用来提示用户文件上传失败。当然这两个layer.msg可以写成一个方法，减少代码冗余 area: ['600', '70px'], icon: 2, //0表示提醒，1表示成功，2表示失败！ time: 2000, //2秒关闭（如果不配置，默认是3秒） anim: 6, skin: 'customStyle' }); }); };
导出文件：前端通过模拟表单，用浏览器将文件导出来。当然在导出文件之前后端需要根据查询参数查询到正确数据后，建立一个内容格式正确的文件！
/** * 功能：导出文档，文档下载 * 把CSV文件上传到后端之后，那么前端就算是完事了，至于后端怎么玩的，我们不管；接下来就是导出文件了，相比于上传文件，导出文件就相当简单了。 * 前端将需要查询数据的参数发送到后端，后端根据参数将需要的数据查询出来以后，按固定格式生成CSV，PDF等格式的文件(生成PDF文件时，如果需要展示报表的图形界面，则前端需要将报表图形转换成base64位编码发送给后端，后端自己解析编码并完成构图)， * 接下来就是文件导出了。注意：由于ajax请求下载的时候，后端是以数据流的形式将文件数据返回回来，那么前端就无法获取到固定格式的文件(就是一串编码)。 * 这时候又该表单上场了，我们以模拟表单的方式，将文件导出来。模拟表单就是在页面上新建一个from表单，然后将该表单添加到页面的随意一个节点下(此处直接挂载在了body下，当然它是隐藏的，界面上不会显示)，然后通过form表单的submit方法，通过浏览器将文件导出来。 */ $scope.export = function () { var parameter = {}; //查询数据的参数 $http({ url: url, //查询数据，后端生成文件的链接，不是下载链接。 method: "POST", dataType: "JSON", headers: { "Accept": "application/json", "Content-type": "application/json;charset=UTF-8" }, data: parameter, cache: false, timeout: 15000 //超时设置为15秒 }).then(function (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", value); $eleForm.submit(); //通过表单submit方法，模拟表单将文件导出 } else { Confirmation.confirm("Export Failed!", 0, "OK"); } }).catch(function (response) { Confirmation.confirm("Export Failed!", 0, "OK"); }); };
在完成了文件的上传和导出以后，接下来就是图片的上传和下载。
图片的上传和下载：前面在PDF文件的构建时有需要将报表的图形部分上传到后端。图片的上传是一样的，就是将本地图片获取到以后转换成base64位编码，然后将编码发送到后端，后端获取到编码以后存入数据库，则图片上传完成。
显示图片，则是一个反向工程，从后端将base64编码获取到以后，解码显示成图片就成。至于下载图片，form表单严阵以待！
/** * 功能：选择图片，获取本地图片的base64位编码 * 这应该是文件上传的第三种方式：前两种都是显视 type='file' ,这一种是模拟一个表单。将type='file'封装在方法内部，避免了type='file' 显视显示，出现样式上的不协调 * 在方法内新建一个表单(当然样式是隐视的)，然后将该表单添加到页面的随意一个节点下(此处还是直接挂载在了body下)，然后自点击一下，通过自点击打开 type='file', 进行图片的选取。 * 需要注意的是：在方法的最后面需要将这个挂载上去的节点移除，不然添加的图片永远都是第一次添加的那张。 */ $scope.addPicture = function () { 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("请确保文件为图像文件!", 0, "OK"); // return false; // } var reader = new 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 读取完成，无论成功失败 */ }); };
