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

前端开发 作者: 2024-08-26 05:00:01
这几天一直在做报表模块。做报表的过程中,需要上传本地CSV格式文件,以供后端解析,从而批量导入数据;同时,也需要从后端下载文件(格式多种:有CSV,PDF,以及JSON),用于本地浏览。 上传文件:文
<!--第一种:直接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)">);
    });
};
*
 * 功能:选择图片,获取本地图片的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         读取完成,无论成功失败
         
    });
};
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68790.html