文件的上传与下载、图片的上传和读取

这几天一直在做报表模块。做报表的过程中，需要上传本地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");
    new FormData(uploadForm);
    formData.append('data',"fengling");

 注意通过JQ ajax提交数据的时候，属性设置有讲究 
    $.ajax({
        url: url,type: 'POST',cache: false,不缓存
        data: formData,1)">上传formData封装的数据
        processData: //告诉jQuery不要去处理发送的数据
        contentType: false      //告诉jQuery不要去设置Content-Type请求头
    }).done( (res) {
        layer.msg("File upload or data interpretation failed!",{    layer.msg是 layer插件 的一个信息提示模板。此处用来提示用户文件上传成功
            area: ['600','70px'],icon: 12秒关闭（如果不配置，默认是3秒）
            anim: 6
        });
    }).fail(layer.msg是 layer插件 的一个信息提示模板。此处用来提示用户文件上传失败。当然这两个layer.msg可以写成一个方法，减少代码冗余
            area: ['600',icon: 2,1)">0表示提醒，1表示成功，2表示失败！
            time: 2000,1)">
        });
    });
};

　　导出文件：前端通过模拟表单，用浏览器将文件导出来。当然在导出文件之前后端需要根据查询参数查询到正确数据后，建立一个内容格式正确的文件！

*
 * 功能：导出文档，文档下载
 * 把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)">);
    });
};

 

 

在完成了文件的上传和导出以后，接下来就是图片的上传和下载。
　　图片的上传和下载：前面在PDF文件的构建时有需要将报表的图形部分上传到后端。图片的上传是一样的，就是将本地图片获取到以后转换成base64位编码，然后将编码发送到后端，后端获取到编码以后存入数据库，则图片上传完成。
　　显示图片，则是一个反向工程，从后端将base64编码获取到以后，解码显示成图片就成。至于下载图片，form表单严阵以待！

*
 * 功能：选择图片，获取本地图片的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         读取完成，无论成功失败
         
    });
};