【java 上传+下载】-白红宇

【java 上传+下载】

阅读量：5986 次

发布时间：2019-06-20

本文共 17044 字，大约阅读时间需要 56 分钟。

一.先说说上传

第一步：

pom.xml文件加上上传文件依赖架包

1           
      
       2             
       
        commons-fileupload
       3             
       
        commons-fileupload
       4             
       
        1.3.1
       5

View Code

并且在配置文件中配置：

View Code

第二步：

页面添加上传需要的input框和按钮

upload.jsp代码：

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3  4  5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 8 %> 9 10 11 12 
      13 
      14 
      15 
      16 
      17 
      18 
      19 
          20 上传位点信息21 22 23 
      
       24               
       
        25                 
        
         26                     
         27                 
        
28                 
        
29                 
        
         30                     
         31                     
         32                     
         33                 
        
34             
       
35 
      
36 37  38 39 40 41 42 43

View Code

input上传框如果想要好看一点的样子或者拖拽功能，可以使用页面上引用的CSS【upload/css/default.css和upload/css/fileinput.css】和JS【/upload/js/fileinput.js】这是引用别人现成的插件，可以网上找更好的资源来用。

upload.js代码：上传按钮的绑定事件

1 $(document).ready(function(){ 2      3         /** 4          * 上传按钮 5          */ 6         $(".upFileButton").click(function(){ 7              8                 var file = $("#file-4").val(); 9                 if(file == ""){10                      layer.msg('选择上传文件后进行操作！', {11                           icon: 4,12                           time: 2000 13                         }, function(){14                         });15                 }else{16                     var fd = new FormData();17                     fd.append("upfile", $("#file-4").get(0).files[0]);18                     $.ajax({19                         url: "uploadFile.htmls?diseaseName="+parent.diseaseName+"&diseaseId="+parent.diseaseId1,20                         type: "POST",21                         processData: false,22                         contentType: false,23                         data: fd,24                         success: function(data) {25                             if(data == "基因位点信息上传成功！"){26                                 layer.msg(data, {27                                       icon: 1,28                                       time: 2000 29                                     }, function(){30                                     });31                                 parent.layer.close(parent.upload);32                             }else{33                                 layer.msg(data, {34                                       icon: 4,35                                       time: 2000 36                                     }, function(){37                                     });38                             }39                             40                         }41                     });42                 }43                 return ;44         });45 });

View Code

核心部分就是：

var fd = new FormData();

fd.append("upfile", $("#file-4").get(0).files[0]);

第三步：

在服务器上处理接收过来的file文件：以输入流的形式读取到服务器端，再以输出流将temp临时文件写到服务器的磁盘上，就完成上传功能。

Controller核心部分：

【核心类 MultipartFile】

1 @RequestMapping("/uploadFile") 2     @ResponseBody 3     public String uploadFile(@RequestParam("upfile")MultipartFile partFile,HttpServletRequest request,String diseaseName,String diseaseId) throws IOException, EncryptedDocumentException, InvalidFormatException{
    //MultipartFile这里得到了上传的文件 4          5          // 得到上传服务器的路径 6           String path = "d:/file-ave/"; 7           // 得到上传的文件的文件名 8           String filename = partFile.getOriginalFilename(); 9           InputStream inputStream = partFile.getInputStream();10           byte[] b = new byte[1073741824];11           int length = inputStream.read(b);12           path += filename;13           // 文件流写到服务器端14           FileOutputStream outputStream = new FileOutputStream(path);15           outputStream.write(b, 0, length);16           inputStream.close();17           outputStream.close();18           19           20         return "";21     }

View Code

备注：

以上完成上传，在配置文件和controller中都限定了允许上传的最大文件为1G.我们可以去掉文件大小的限制，大文件也可以进行上传！

可以配置文件中将大小限制去掉：

View Code

JDK1.7提供使用NIO进行读写操作，Controller中可以修改为：

即下面的方法二

1     String path = "d:/file-ave/"+productName+"/"+diseaseName+"/"; 2                   // 得到上传的文件的文件名 3                   String filename = partFile.getOriginalFilename(); 4                   InputStream inputStream = partFile.getInputStream(); 5  6                   DecimalFormat df = new DecimalFormat(); 7                   String fileSize = partFile.getSize()/1024>100 ? (partFile.getSize()/1024/1024>100? df.format(partFile.getSize()/1024/1024/1024)+"GB" :df.format(partFile.getSize()/1024/1024)+"MB" ) :df.format(partFile.getSize()/1024)+"KB"; 8                   9                  10                  11                   //方法1：配置文件中有配置最大文件大小12                   /*byte[] b = new byte[1073741824];13                   int length = inputStream.read(b);14                   path += filename;15                   // 文件流写到服务器端16                   FileOutputStream outputStream = new FileOutputStream(path);17                   outputStream.write(b, 0, length);18                   inputStream.close();19                   outputStream.close();*/20                   //方法2：21                   path += filename;22                   long start = System.currentTimeMillis();23                   Files.copy(inputStream, Paths.get(path));24                   System.out.println(((double)System.currentTimeMillis()-start)/1000);25                   inputStream.close();

View Code

仅Files.copy(inputStream, Paths.get(path));就可以实现文件拷贝。不需要自己创建数组的大小，效率极高。

二.来看看下载

在页面提供一个超链接即可：

1 【下载】

View Code

Controller

1 @RequestMapping("/fileDownload") 2     public void fileDownload(String fileId,HttpServletResponse response) throws IOException, InterruptedException{ 3         // 4          5         Filelist filelist = filelistService.get(fileId); 6         Assert.notNull(filelist); 7         String filePath = filelist.getFilePath(); 8         String fileName = filelist.getFileName(); 9         String targetPath = "D:/biologyInfo/Download/";10         File file = new File(targetPath);11         while(!file.exists()){12             file.mkdirs();13         }14         FileInputStream inputStream = new FileInputStream(new File(filePath));15         /*File file2 = new File(targetPath+fileName);16         if(!file2.exists()){17             18         }*/19         response.setContentType("multipart/form-data");20     response.setHeader("Content-Type", "application/octet-stream;charset=utf-8");21         response.setHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "utf-8"));//保证下载文件名不会出现乱码22         OutputStream outputStream = response.getOutputStream();23         //这样下载下来的文件打不开是损坏的24         /*while(inputStream.read() != -1){25             outputStream.write(inputStream.read());26         }*/27         28          byte[] b = new byte[1024];  29          int length = 0;  30          while ((length = inputStream.read(b)) != -1) {  31             outputStream.write(b, 0, length);  32          }33         inputStream.close();34         outputStream.close();35     }

View Code

在服务器端处理的时候，会碰上这样几个问题：

1.服务器提供下载功能，是要将文件下载到客户端的机子上，因此：OutputStream outputStream = response.getOutputStream();

2.如果是要下载服务器端的文件到服务器端的另一个地方，也就是写入再写出，那么需要OutputStream outputStream2 = new FileOutputStream(new File(目标文件夹+文件名))，否则会提示无法磁盘无法访问，这个问题不关乎文件权限或者目标文件夹的权限。

三.上传的简单版本【不使用表单提交方式----上传按钮的简单上传】--使用H-ui前台框架

1.JSP页面

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3  4  5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 8 %> 9 10 11 12 13 
      14 
      15 
      16 
      17 
      18 19 
      20 
      21 
      22 
      23 
      24 
      25 26 素材界面27 28 29 
      
       30     
       
        31         
        
         32             
         33             
         34                上传素材35               36             37         38         
        
39         40     
       
41     
       
        42         43     
       
44 
      
45 46  47  48  49 50 51 52 53

View Code

JS文件 showAllMaterial.js

1 $(document).ready(function(){ 2      3     /* 简单的上传功能*/ 4     $("input[type='file']").change( function() { 5         var files = $("#upload_1")[0].files; 6         for (var i = 0; i < files.length; i++) { 7             var fileName = files[i].name; 8             //获取  后缀名 9             var suffix = fileName.substring(fileName.lastIndexOf('.'));10             11             var fileDate = new FormData();12             fileDate.append("upfile",files[i]);13             14             15             $.ajax({16                 url: "upLoadMaterial.htmls",17                 type: "POST",18                 processData: false,19                 contentType: false,20                 data: fileDate,21                 success: function(data) {22                     //回调函数23                     alert("上传成功");24                 }25             });26         }27     });28 });

View Code

2.Controller Java1.8

1      2 /*    简单的上传功能*/ 3     @RequestMapping("upLoadMaterial") 4     public void upLoadMaterial(@RequestParam("upfile")MultipartFile partFile,HttpServletRequest request) throws WxErrorException, IOException{ 5          6         System.out.println("上传永久素材"); 7 //        String madiaId = null; 8 //        String url = null; 9 //        String materName = null;10         File files = new File("d:/material/");11         if(!(files.exists())){12             files.mkdirs();13         }14         File file = new File(files.getPath()+"/"+partFile.getOriginalFilename());//上传到服务器端的路径15         InputStream is = partFile.getInputStream();16         FileUtils.copyToFile(is, file);17         System.out.println(partFile.getContentType());18         System.out.println(file.getPath());19         20 //        PermanentMaterialManager permanentMaterialManager = new PermanentMaterialManager();21 //        permanentMaterialManager.otherMaterial(materName,file,madiaId,url);22         23     }24

View Code

未配置其他的东西，最简单的上传功能

四.上传的完善版本【表单提交方式，XMLHttpRequest在JS中处理，展现上传速度，进度条，消耗时间等】----使用bootstrap进行美化----org.springframework.web.multipart.MultipartFile后台接收

1.A.jsp页面上有个按钮，可以打开上传页面

1 2                上传素材3

View Code

A.js文件给这个按钮绑定打开页面的功能---使用layer弹出页面，因此需要在JSP中引用layer架包

1 $(".uploadButton").click(function(){2         uploadView = layer.open({3               type: 2,4               skin: 'layui-layer-lan', //加上边框5               area: ['420px', '300px'], //宽高6               content: "openUpLoadView.htmls"7         });8     });

View Code

2.页面跳转通过后台的controller中的方法

1 //打开上传页面2     @RequestMapping("openUpLoadView")3     public String openUpLoadView(){4         return "/material/upload";5     }

View Code

3.upload.jsp页面也就是上传文件的页面

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3  4  5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 8 %> 9 10 11 12 
      13 
      14     使用XMLHttpRequest上传文件15 16 17 
      
       18     
       
        19         
        Select a File to Upload20         
        21     
       
22     
       
23     
       
24     
       
25     
       
        26         
        27     
       
28     
       
29     
       
30     
       
        31       
        
         32         33       
        
34     
       
35 
      
36  37 38 39 40

View Code

4.upload.js文件处理上传文件，上传进度等

1 var startTime ;//开始上传时间 2  3 function fileSelected() { 4             var file = document.getElementById('fileToUpload').files[0]; 5             if (file) { 6               var fileSize = 0; 7               if (file.size > 1024 * 1024){ 8                   if(file.size >1024 * 1024 * 1024) 9                       fileSize = (Math.round(file.size * 100 / (1024 * 1024 * 1024)) / 100).toString() + 'GB';10                   else11                       fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';12               }13               else{14                   fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';15               }16               document.getElementById('fileName').innerHTML = '上传文件: ' + file.name;17               document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;18               document.getElementById('fileType').innerHTML = '文件类型: ' + ((file.type == "")?"未识别类型":file.type);19             }20      }21 22           function uploadFile() {23             var fd = new FormData();//获取上传文件24             fd.append("upfile", document.getElementById('fileToUpload').files[0]);25             startTime = new Date();//获取起始时间，也就是开始上传的时间26             var xhr = new XMLHttpRequest();27             xhr.upload.addEventListener("progress", uploadProgress, false);28             xhr.addEventListener("load", uploadComplete, false);29             xhr.addEventListener("error", uploadFailed, false);30             xhr.addEventListener("abort", uploadCanceled, false);31             xhr.open("POST", "uploadMaterial.htmls");32             xhr.send(fd);33           }34 35           function uploadProgress(evt) {36             if (evt.lengthComputable) {37                 //evt.loaded  当前上传文件的大小38               var percentComplete = Math.round(evt.loaded * 100 / evt.total);39               document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';40               var currtTime = new Date();//当前时间41               var costTime = (currtTime - startTime)/1000+1;//消耗的时间42               var speed = evt.loaded/((currtTime - startTime)/1000)/1024;//上传速度  KB/S43               var sp = evt.loaded/((currtTime - startTime)/1000);//用于计算上传速度的变量44               var speed = sp/1024>1 ? 45                         (sp/1024/1024>1 ? 46                               (sp/1024/1024/1024>1 ? 47                                       (sp/1024/1024/1024).toFixed(2)+" GB/秒"48                                       :(sp/1024/1024).toFixed(2)+" MB/秒")49                         :(sp/1024).toFixed(2)+" KB/秒" )50                     :sp.toFixed(2)+" B/秒";//文件上传速度   toFixed(2)截取保留小数点后2位，作用对象是number类型的51               var loaded = evt.loaded/1024>1 ? 52                               (evt.loaded/1024/1024>1 ? 53                                       (evt.loaded/1024/1024/1024>1 ? 54                                               (evt.loaded/1024/1024/1024).toFixed(2)+" GB"55                                               :(evt.loaded/1024/1024).toFixed(2)+" MB")56                                 :(evt.loaded/1024).toFixed(2)+" KB" )57                             :evt.loaded.toFixed(2)+" B";//文件已上传大小58               $(".pro").html("上传大小："+loaded +"消耗时间："+costTime.toFixed(3)+"s 上传速度："+speed+"KB/S");59               $("div[role='progressbar']").width(percentComplete+"%");60               $("div[role='progressbar']").html(percentComplete+"%");61               62             }63             else {64               document.getElementById('progressNumber').innerHTML = 'unable to compute';65             }66           }67 68           function uploadComplete(evt) {
    //成功的回调函数69             /* This event is raised when the server send back a response */70             alert(evt.target.responseText);71           }72 73           function uploadFailed(evt) {
    //失败的回调函数74             alert("There was an error attempting to upload the file.");75           }76 77           function uploadCanceled(evt) {
    //用户或者浏览器关闭连接导致上传中断的上传78             alert("The upload has been canceled by the user or the browser dropped the connection.");79           }80 $(document).ready(function(){81     82 });

View Code

5.上传给服务器 controller处理方法--仅将上传文件保存，并返回一串字符串而已

1 import org.apache.commons.io.FileUtils; 2  3 //开始上传 4     @RequestMapping("uploadMaterial") 5     @ResponseBody 6     public String uploadMaterial(@RequestParam("upfile")MultipartFile partFile,HttpServletRequest request) throws IOException{ 7         File files = new File("d:/material/"); 8         if(!(files.exists())){ 9             files.mkdirs();10         }11         File file = new File(files.getPath()+"/"+partFile.getOriginalFilename());//上传到服务器端的路径12         InputStream is = partFile.getInputStream();13         FileUtils.copyInputStreamToFile(is, file);14         System.out.println(partFile.getContentType());15         System.out.println(file.getPath());16         return "/material/upload";17     }

View Code

效果图：