zoukankan html css js c++ java

【java 上传+下载】

一.先说说上传

第一步：
pom.xml文件加上上传文件依赖架包

1           <dependency>
2             <groupId>commons-fileupload</groupId>
3             <artifactId>commons-fileupload</artifactId>
4             <version>1.3.1</version>
5         </dependency>

View Code

并且在配置文件中配置：

1 <!-- 实现文件上传，这样一旦某个Request是一个MultipartRequest，它就会首先被MultipartResolver处理，然后再转发相应的Controller -->
2     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
3          <!-- 设置上传文件的最大尺寸为1GB -->
4           <property name="maxUploadSize">
5               <value>1073741824</value>
6          </property>
7     </bean>

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 <!DOCTYPE HTML>
10 <html>
11 <head>
12 <meta charset="utf-8">
13 <meta name="renderer" content="webkit|ie-comp|ie-stand">
14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
15 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,member-scalable=no" />
16 <meta http-equiv="Cache-Control" content="no-siteapp" />
17 <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
18 <link rel="stylesheet" href="../upload/css/default.css" />
19 <link media="all" rel="stylesheet"  href="../upload/css/fileinput.css"/>    
20 <title>上传位点信息</title>
21 </head>
22 <body>
23 <div class="pd-20">
24               <form enctype="multipart/form-data" method="post">
25                 <div class="form-group">
26                     <input id="file-4" type="file" class="file" data-upload-url="#">
27                 </div>
28                 <hr>
29                 <div class="form-group col-lg-3" style="margin-left:30%;padding-left:5%;">
30                     <button class="btn btn-info" type="reset">刷新</button>
31                     <button class="btn btn-primary  upFileButton" type="button">上传</button>
32                     <button class="btn btn-default" type="reset">重置</button>
33                 </div>
34             </form>
35 </div>
36 
37 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
38 <script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script>
39 <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
40 <script type="text/javascript" src="../upload/js/fileinput.js"></script>
41 <script type="text/javascript" src="../js/geneinfo/disease/upload.js"></script>
42 </body>
43 </html>

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.我们可以去掉文件大小的限制，大文件也可以进行上传！

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

1  <!-- 实现文件上传，这样一旦某个Request是一个MultipartRequest，它就会首先被MultipartResolver处理，然后再转发相应的Controller -->
2     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
3          <!-- 设置上传文件的最大尺寸为1GB -->
4          <!-- <property name="maxUploadSize">
5           <value>1073741824</value>
6          </property> -->
7     </bean>

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 <td><a href='fileDownload.htmls?fileId="+item.fileId
2                     +"' class='check'>【下载】</a>

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 <!DOCTYPE HTML>
11 <html>
12 <head>
13 <meta charset="utf-8">
14 <meta name="renderer" content="webkit|ie-comp|ie-stand">
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.6,maximum-scale=1.0,user-scalable=no" />
17 <meta http-equiv="Cache-Control" content="no-siteapp" />
18 
19 <link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.css" />
20 <link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.7/iconfont.css" />
21 <link rel="stylesheet" type="text/css" href="../lib/icheck/icheck.css" />
22 <link rel="stylesheet" type="text/css" href="../static/h-ui/css/style.css" />
23 <link rel="stylesheet" type="text/css" href="../css/welcome/welcome.css" />
24 <link rel="stylesheet" type="text/css" href="../css/material/showAllMaterial.css" />
25 
26 <title>素材界面</title>
27 </head>
28 <body>
29 <div class="panel panel-secondary f-l"  style=" 99%">
30     <div class="panel-header">
31         <div class="f-l" style="    margin-top: 5px;">
32             <!--不使用表单提交的方式--- 简单的按钮上传功能 -->
33             <span class="btn-upload">
34               <a href="javascript:void();" class="btn btn-default radius"><i class="Hui-iconfont">&#xe642;</i> 上传素材</a>
35               <input id="upload_1" type="file" multiple name="file_0" class="input-file" accept="audio/*,video/*,image/*,application/*,text/*">
36             </span>
37         
38         </div>
39         
40     </div>
41     <div class="panel-body">
42         
43     </div>
44 </div>
45 
46 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
47 <script type="text/javascript" src="../lib/layer/2.1/layer.js"></script> 
48 <script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script> 
49 <script type="text/javascript" src="../static/h-ui/js/H-ui.js"></script>
50 <script type="text/javascript" src="../js/material/showAllMaterial.js"></script>
51 
52 </body>
53 </html>

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 <span class="btn-upload">
2               <a href="javascript:void();" class="btn btn-default radius uploadButton"><i class="Hui-iconfont">&#xe642;</i> 上传素材</a>
3             </span>

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 <!DOCTYPE html>
10 <html>
11 <head>
12 <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
13 <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css" />
14     <title>使用XMLHttpRequest上传文件</title>
15 </head>
16 <body style="background-image: url('../images/bg123.png');">
17 <form id="form1" enctype="multipart/form-data" method="post" >
18     <div class="">
19         <label for="fileToUpload">Select a File to Upload</label>
20         <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected()" class="btn btn-danger"/>
21     </div>
22     <div id="fileName"></div>
23     <div id="fileSize"></div>
24     <div id="fileType"></div>
25     <div class="">
26         <input type="button" class="btn btn-success btn-sm" style=" 20%;" onclick="uploadFile()" value="上传" />
27     </div>
28     <div id="progressNumber"></div>
29     <div class="pro"></div>
30     <div class="progress">
31       <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 0%;min- 5px;">
32         
33       </div>
34     </div>
35 </form>
36 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
37 <script type="text/javascript" src="../js/material/upload.js"></script>
38 <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
39 </body>
40 </html>

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                   else
11                       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/S
43               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

效果图：

查看全文

相关阅读:
2019.4.1 JMeter中文乱码解决方案
 19.3.25 sql查询语句
 2019.3.23 python的unittest框架与requests
2019.3.22 JMeter基础操作
 19.3.21 计算机网络基础知识
 19.3.20 cmd操作：1.dir查看当前文件夹内的文件；2.alt+space+c关闭cmd窗口
 19.3.20 解决pycharm快捷键无法使用问题和熟悉git与码云操作流程
 19.3.19 使用Flask框架搭建一个简易登录服务器
 回调函数
 var img = new Image()

原文地址：https://www.cnblogs.com/sxdcgaq8080/p/5848584.html