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

这几天一直在做报表模块。做报表的过程中,需要上传本地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         读取完成,无论成功失败
         
    });
};

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档读起来特别费力,基础差、底子薄的有可能一会就会被绕晕了,最起码英文文档中的代码与中文文档中的代码是一致的,但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB。   其中用到的软件:   Chart.js框架,版本1.0.2,一
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示: 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
HTML:让表单、文本框只读,不可编辑的方法有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使中国">的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中,移动端新近增加了一个功能“微信授权登录”,由于自己不是负责移动端开发的,但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作,谁让自己是负责人呢?原来负责人就是负责最后把所有的BUG解决掉。 首先,熟悉一下微信授权部分的源代码,如下所示:
AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据,第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o
Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题,刚开始以为只是个警告,没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位,显示以下代码存在错误:
AngularJS控制器controller之间如何通信angular控制器通信的方式有三种:1,利用作用域继承的方式。即子控制器继承父控制器中的内容2,基于事件的方式。即$on,$emit,$boardcast这三种方式3,服务方式。写一个服务的单例然后通过注入来使用利用作用域的继承方式由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值
AngularJS路由问题解决遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了,但是后来发现问题还是来了:Couldnotresolve'yhDtlMaintain/yhdetail'fromstate'yhMaintain'药店详情http://192.168.1.118:8088/lmapp/index.html#/0优惠券详情
书海拾贝之特殊的ng-src和ng-href在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下:1)浏览器加载静态HTML文件并解析为DOM;2)浏览器加载angular.js文件;3)angular监听DOMContentLoaded事件,监听到时开始启动;4)angular寻找ng-app指令,确定作用范围;
angularjs实现页面跳转并进行参数传递Angular页面传参有多种办法,我在此列举4种最常见的:1.基于ui-router的页面跳转传参(1)在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId
AngularJS实现表格数据的编辑,更新和删除效果实现首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据var app = angular.module('plunker', ['ui.bootstrap']);app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $sc
ANGULAR三宗罪之版本陷阱      坑!碰到个大坑,前面由于绑定日期时将angular版本换为angular-1.3.0-beta.1时,后来午睡后,登录系统,发现无论如何都登陆不进去了,经过调试,发现数据视图已经无法实现双向绑定了。自己还以为又碰到了“僵尸程序”了呢,对比药店端的程序发现并没有什么不同之处。后来自己经过一番思索才隐约感觉到是不是angular的版本造成的,将版本换为之前
JS实现分页操作前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果。在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果。受前面“JS实现时间选择插件”的启发,自己首先需要查看一下HTML5能否实现此效果。 整了半天,不管是用纯CSS3也好,还是用tmpagination.js还是bootstrap组件也好,到最后自己静下心来理
浏览器兼容性解决之道前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标,Angular团队声明:Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本,它们也不会保证An
JS利用正则表达式校验手机号绪 由于项目需求,需要在前端实现手机号码的校验。当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完成校验,然后将校验结果返回给客户端,客户端根据返回的结果再进行进一步的处理。如此反而复杂化了处理过程。 其实,处于安全考虑,应该在服务端进行二次校验。以下为在客户端的JS中校验手机号码格式
基于项目实例解析ng启动加载过程前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。 下面以实际项目为例进行简要讲解。1.载入ng库2.等待,直到DOM树构造完毕。3.发现ng-app,自动进入启动引导阶段。4.根据ng-app名称找到相应的路由。5.加载默认地址。6.Js顺序执行,加载相应模版页sys_tpls/