常用的上传和下载
使用Jquery的框架
下载
使用a标签 download属性
<a id="down" href="url" download="文件名">点击下载</a>
使用button加window.location.href
<a class="nui-button" onclick="exportFile">点击下载</a> <script> function exportFile(){ var url = ""; window.loaction.href=url; } </script>
- 后端下载目前返回的是ResponseEntity<byte[]>类型,尽量避免报错,否则前端需要另写函数捕捉报错信息,如果没有查到相关信息则返回空。
上传
- 使用input的file属性
<a class="file"> 选择文件:<input type="file" id="upload"/> </a> <script> //可以通过click事件,在上传之前加限制条件 $("#upload").click(function(){ if(){ return false;//不会再进入文件选择 }else{ $("#upload").change( function(e){ //取到文件 var fileName=e.target.name; var fileId=e.target.id; var file=$("#"+fileId)[0].files; //判断文件是否满足条件 var max_size=1024*1024*1; //一般上传文件用FormData存储键值对的格式模拟表单提交 var fileData=new FormData(); if(file.length==0||file[0].size>=max_size){ alert("未上传文件或者,文件过大。"); return; }else{ fileData.append("file", file[0]) } var uploadUrl=""; //用ajax上传文件流 $.ajax({ url: uploadUrl, type: "POST", data: fileData, //此处还需要加processData配置,否则会报错 processData: false, contentType: false, success: function(res){ //处理上传返回结果 } }) } ) } }) </script> //通过外包a标签重定义文件上传的样式,主要通过将input的opacity设置为0,隐藏了。 <style> .file{ position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 24px;//根据Input外的高度 } .file input{ position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } </style>
- 使用button实现上传
<button onclick=chooseFile" id="uploadWrapper"></button>
function chooseFile(){
$("#uploadWrapper").after('<input id="upload" onclick="uploadFile">')
document.getElementById("upload").click();
}
function uploadFile(){
var file = $("#upload")[0].files;
......
}
转载自:https://segmentfault.com/a/1190000041076548