关于javascript:常见的上传和下载

应用 Jquery 的框架

• 下载

  1. 应用 a 标签 download 属性

     <a id="down" href="url"> 点击下载 </a>

  2. 应用 button 加 window.location.href

     <a class="nui-button" onclick="exportFile"> 点击下载 </a>
     
     <script>
     function exportFile(){
         var url = "";
         window.loaction.href=url;
     }
     </script>

  3. 后端下载目前返回的是 ResponseEntity<byte[]> 类型，尽量避免报错，否则前端须要另写函数捕获报错信息，如果没有查到相干信息则返回空。

• 上传

  1. 应用 input 的 file 属性

  <a class="file">
   抉择文件：<input type="file" id="upload"/>
  </a>
  
  <script>
   $("#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;
           var fileData=new FormData;
           if(file.length==0||file[0].size>=max_size){alert("未上传文件或者，文件过大。");
  return;
  
           }
           var uploadUrl="";
           // 用 ajax 上传文件流
           $.ajax({
               url: uploadUrl,
               type: "POST",
               data: fileData,
               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>