关于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>