<!--第一种：直接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 读取完成，无论成功失败
});
};
服务热线 19970861797
