一.先说说上传

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

           <dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>

并且在配置文件中配置:

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

第二步:

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

upload.jsp代码:

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,member-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../upload/css/default.css" />
<link media="all" rel="stylesheet" href="../upload/css/fileinput.css"/>
<title>上传位点信息</title>
</head>
<body>
<div class="pd-20">
<form enctype="multipart/form-data" method="post">
<div class="form-group">
<input id="file-4" type="file" class="file" data-upload-url="#">
</div>
<hr>
<div class="form-group col-lg-3" style="margin-left:30%;padding-left:5%;">
<button class="btn btn-info" type="reset">刷新</button>
<button class="btn btn-primary upFileButton" type="button">上传</button>
<button class="btn btn-default" type="reset">重置</button>
</div>
</form>
</div> <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../upload/js/fileinput.js"></script>
<script type="text/javascript" src="../js/geneinfo/disease/upload.js"></script>
</body>
</html>

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

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

 $(document).ready(function(){

         /**
* 上传按钮
*/
$(".upFileButton").click(function(){ var file = $("#file-4").val();
if(file == ""){
layer.msg('选择上传文件后进行操作!', {
icon: 4,
time: 2000
}, function(){
});
}else{
var fd = new FormData();
fd.append("upfile", $("#file-4").get(0).files[0]);
$.ajax({
url: "uploadFile.htmls?diseaseName="+parent.diseaseName+"&diseaseId="+parent.diseaseId1,
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function(data) {
if(data == "基因位点信息上传成功!"){
layer.msg(data, {
icon: 1,
time: 2000
}, function(){
});
parent.layer.close(parent.upload);
}else{
layer.msg(data, {
icon: 4,
time: 2000
}, function(){
});
} }
});
}
return ;
});
});

核心部分就是:
var fd = new FormData();
fd.append("upfile", $("#file-4").get(0).files[0]);

第三步:

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

Controller核心部分:
【核心类 MultipartFile】

 @RequestMapping("/uploadFile")
@ResponseBody
public String uploadFile(@RequestParam("upfile")MultipartFile partFile,HttpServletRequest request,String diseaseName,String diseaseId) throws IOException, EncryptedDocumentException, InvalidFormatException{//MultipartFile这里得到了上传的文件 // 得到上传服务器的路径
String path = "d:/file-ave/";
// 得到上传的文件的文件名
String filename = partFile.getOriginalFilename();
InputStream inputStream = partFile.getInputStream();
byte[] b = new byte[1073741824];
int length = inputStream.read(b);
path += filename;
// 文件流写到服务器端
FileOutputStream outputStream = new FileOutputStream(path);
outputStream.write(b, 0, length);
inputStream.close();
outputStream.close(); return "";
}

备注:

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

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

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

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

即下面的方法二

     String path = "d:/file-ave/"+productName+"/"+diseaseName+"/";
// 得到上传的文件的文件名
String filename = partFile.getOriginalFilename();
InputStream inputStream = partFile.getInputStream(); DecimalFormat df = new DecimalFormat();
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"; //方法1:配置文件中有配置最大文件大小
/*byte[] b = new byte[1073741824];
int length = inputStream.read(b);
path += filename;
// 文件流写到服务器端
FileOutputStream outputStream = new FileOutputStream(path);
outputStream.write(b, 0, length);
inputStream.close();
outputStream.close();*/
//方法2:
path += filename;
long start = System.currentTimeMillis();
Files.copy(inputStream, Paths.get(path));
System.out.println(((double)System.currentTimeMillis()-start)/1000);
inputStream.close();

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

二.来看看下载

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

 <td><a href='fileDownload.htmls?fileId="+item.fileId
+"' class='check'>【下载】</a>

Controller

 @RequestMapping("/fileDownload")
public void fileDownload(String fileId,HttpServletResponse response) throws IOException, InterruptedException{
// Filelist filelist = filelistService.get(fileId);
Assert.notNull(filelist);
String filePath = filelist.getFilePath();
String fileName = filelist.getFileName();
String targetPath = "D:/biologyInfo/Download/";
File file = new File(targetPath);
while(!file.exists()){
file.mkdirs();
}
FileInputStream inputStream = new FileInputStream(new File(filePath));
/*File file2 = new File(targetPath+fileName);
if(!file2.exists()){ }*/
response.setContentType("multipart/form-data");
response.setHeader("Content-Type", "application/octet-stream;charset=utf-8");
response.setHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "utf-8"));//保证下载文件名不会出现乱码
OutputStream outputStream = response.getOutputStream();
//这样下载下来的文件打不开是损坏的
/*while(inputStream.read() != -1){
outputStream.write(inputStream.read());
}*/ byte[] b = new byte[1024];
int length = 0;
while ((length = inputStream.read(b)) != -1) {
outputStream.write(b, 0, length);
}
inputStream.close();
outputStream.close();
}

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

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

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

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

1.JSP页面

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.6,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.css" />
<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui/css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/welcome/welcome.css" />
<link rel="stylesheet" type="text/css" href="../css/material/showAllMaterial.css" /> <title>素材界面</title>
</head>
<body>
<div class="panel panel-secondary f-l" style="width: 99%">
<div class="panel-header">
<div class="f-l" style=" margin-top: 5px;">
<!--不使用表单提交的方式--- 简单的按钮上传功能 -->
<span class="btn-upload">
<a href="javascript:void();" class="btn btn-default radius"><i class="Hui-iconfont"></i> 上传素材</a>
<input id="upload_1" type="file" multiple name="file_0" class="input-file" accept="audio/*,video/*,image/*,application/*,text/*">
</span> </div> </div>
<div class="panel-body"> </div>
</div> <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="../js/material/showAllMaterial.js"></script> </body>
</html>

 JS文件 showAllMaterial.js

 $(document).ready(function(){

     /* 简单的上传功能*/
$("input[type='file']").change( function() {
var files = $("#upload_1")[0].files;
for (var i = 0; i < files.length; i++) {
var fileName = files[i].name;
//获取 后缀名
var suffix = fileName.substring(fileName.lastIndexOf('.')); var fileDate = new FormData();
fileDate.append("upfile",files[i]); $.ajax({
url: "upLoadMaterial.htmls",
type: "POST",
processData: false,
contentType: false,
data: fileDate,
success: function(data) {
//回调函数
alert("上传成功");
}
});
}
});
});

2.Controller  Java1.8

 /*    简单的上传功能*/
@RequestMapping("upLoadMaterial")
public void upLoadMaterial(@RequestParam("upfile")MultipartFile partFile,HttpServletRequest request) throws WxErrorException, IOException{ System.out.println("上传永久素材");
// String madiaId = null;
// String url = null;
// String materName = null;
File files = new File("d:/material/");
if(!(files.exists())){
files.mkdirs();
}
File file = new File(files.getPath()+"/"+partFile.getOriginalFilename());//上传到服务器端的路径
InputStream is = partFile.getInputStream();
FileUtils.copyToFile(is, file);
System.out.println(partFile.getContentType());
System.out.println(file.getPath()); // PermanentMaterialManager permanentMaterialManager = new PermanentMaterialManager();
// permanentMaterialManager.otherMaterial(materName,file,madiaId,url); }

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

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

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

 <span class="btn-upload">
<a href="javascript:void();" class="btn btn-default radius uploadButton"><i class="Hui-iconfont"></i> 上传素材</a>
</span>

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

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

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

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

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

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css" />
<title>使用XMLHttpRequest上传文件</title>
</head>
<body style="background-image: url('../images/bg123.png');">
<form id="form1" enctype="multipart/form-data" method="post" >
<div class="">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected()" class="btn btn-danger"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="">
<input type="button" class="btn btn-success btn-sm" style="width: 20%;" onclick="uploadFile()" value="上传" />
</div>
<div id="progressNumber"></div>
<div class="pro"></div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width: 5px;"> </div>
</div>
</form>
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/material/upload.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

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

 var startTime ;//开始上传时间

 function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024){
if(file.size >1024 * 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024 * 1024)) / 100).toString() + 'GB';
else
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
}
else{
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
}
document.getElementById('fileName').innerHTML = '上传文件: ' + file.name;
document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;
document.getElementById('fileType').innerHTML = '文件类型: ' + ((file.type == "")?"未识别类型":file.type);
}
} function uploadFile() {
var fd = new FormData();//获取上传文件
fd.append("upfile", document.getElementById('fileToUpload').files[0]);
startTime = new Date();//获取起始时间,也就是开始上传的时间
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "uploadMaterial.htmls");
xhr.send(fd);
} function uploadProgress(evt) {
if (evt.lengthComputable) {
//evt.loaded 当前上传文件的大小
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
var currtTime = new Date();//当前时间
var costTime = (currtTime - startTime)/1000+1;//消耗的时间
var speed = evt.loaded/((currtTime - startTime)/1000)/1024;//上传速度 KB/S
var sp = evt.loaded/((currtTime - startTime)/1000);//用于计算上传速度的变量
var speed = sp/1024>1 ?
(sp/1024/1024>1 ?
(sp/1024/1024/1024>1 ?
(sp/1024/1024/1024).toFixed(2)+" GB/秒"
:(sp/1024/1024).toFixed(2)+" MB/秒")
:(sp/1024).toFixed(2)+" KB/秒" )
:sp.toFixed(2)+" B/秒";//文件上传速度 toFixed(2)截取保留小数点后2位,作用对象是number类型的
var loaded = evt.loaded/1024>1 ?
(evt.loaded/1024/1024>1 ?
(evt.loaded/1024/1024/1024>1 ?
(evt.loaded/1024/1024/1024).toFixed(2)+" GB"
:(evt.loaded/1024/1024).toFixed(2)+" MB")
:(evt.loaded/1024).toFixed(2)+" KB" )
:evt.loaded.toFixed(2)+" B";//文件已上传大小
$(".pro").html("上传大小:"+loaded +"消耗时间:"+costTime.toFixed(3)+"s 上传速度:"+speed+"KB/S");
$("div[role='progressbar']").width(percentComplete+"%");
$("div[role='progressbar']").html(percentComplete+"%"); }
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
} function uploadComplete(evt) {//成功的回调函数
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
} function uploadFailed(evt) {//失败的回调函数
alert("There was an error attempting to upload the file.");
} function uploadCanceled(evt) {//用户或者浏览器关闭连接导致上传中断的上传
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
$(document).ready(function(){ });

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

 import org.apache.commons.io.FileUtils;

 //开始上传
@RequestMapping("uploadMaterial")
@ResponseBody
public String uploadMaterial(@RequestParam("upfile")MultipartFile partFile,HttpServletRequest request) throws IOException{
File files = new File("d:/material/");
if(!(files.exists())){
files.mkdirs();
}
File file = new File(files.getPath()+"/"+partFile.getOriginalFilename());//上传到服务器端的路径
InputStream is = partFile.getInputStream();
FileUtils.copyInputStreamToFile(is, file);
System.out.println(partFile.getContentType());
System.out.println(file.getPath());
return "/material/upload";
}

效果图:

【java 上传+下载】的更多相关文章

  1. Java 上传下载的

    1.上传的步骤: a.导入SmartUpload.jar    b.创建一个上传的类的对象    c.初始化   d.上传至服务器   e.保存    注意:表单提交时需要指定enctype=&quo ...

  2. Java上传下载excel、解析Excel、生成Excel

    在软件开发过程中难免需要批量上传与下载,生成报表保存也是常有之事,最近集团门户开发用到了Excel模版下载,Excel生成,圆满完成,对这一知识点进行整理,资源共享,有不足之处还望批评指正,文章结尾提 ...

  3. JAVA中使用FTPClient上传下载

    Java中使用FTPClient上传下载 在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在c ...

  4. JAVA 实现FTP上传下载(sun.net.ftp.FtpClient)

    package com.why.ftp; import java.io.DataInputStream; import java.io.File; import java.io.FileInputSt ...

  5. Java FTPClient实现文件上传下载

    在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在commons-net包中)实现上传下载文件 ...

  6. JAVA中使用FTPClient实现文件上传下载

    在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在commons-net包中)实现上传下载文件 ...

  7. java实现多线程断点续传,上传下载

    采用apache 的 commons-net-ftp-ftpclient import java.io.File; import java.io.FileOutputStream; import ja ...

  8. JAVA Web 之 struts2文件上传下载演示(二)(转)

    JAVA Web 之 struts2文件上传下载演示(二) 一.文件上传演示 详细查看本人的另一篇博客 http://titanseason.iteye.com/blog/1489397 二.文件下载 ...

  9. JAVA Web 之 struts2文件上传下载演示(一)(转)

    JAVA Web 之 struts2文件上传下载演示(一) 一.文件上传演示 1.需要的jar包 大多数的jar包都是struts里面的,大家把jar包直接复制到WebContent/WEB-INF/ ...

随机推荐

  1. Java Thread.join()方法

    一.使用方式. join是Thread类的一个方法,启动线程后直接调用,例如: Thread t = new AThread(); t.start(); t.join(); 二.为什么要用join() ...

  2. Java for LeetCode 223 Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  3. SAP系统更改小数点显示问题

    在SAP系统中会出现小数点显示的问题,比如123.12,正常情况下是这样显示,但SAP系统是德国的出的系统,德国的书写数字的习惯是将小数点“.”写成“,”逗号,显示为:123,12 这个问题可以使用事 ...

  4. 迷宫问题_BFS_挑战程序设计竞赛p34

    给定一个N*M的迷宫,求从起点到终点的最小步数. N,M<100: 输入: 10 10#S######.#......#..#.#.##.##.#.#........##.##.####.... ...

  5. radio选中

    设置选中:$(':radio[name=isnode][value=' + isnode + ']').prop('checked',true); 1.获取选中值,三种方法都可以: $('input: ...

  6. web开发,关于jsp的常见问题,重复提交,防止后退。

    看了网上的,有几种方法:1 在你的表单页里HEAD区加入这段代码: <META HTTP-EQUIV="pragma" CONTENT="no-cache" ...

  7. 20145213《Java程序设计》第七周学习总结

    20145213<Java程序设计>第七周学习总结 教材学习内容总结 周末快乐的时间总是短暂的,还没好好感受就到了要写博客的周日.有人喟叹时间都去哪儿了,那本周我们就来认识一下Java里的 ...

  8. SEH-关于捕获memcpy的异常

    网上有说memcpy是C语言写的,没有异常处理机制. 但是貌似SEH可以处理. SEH("Structured Exception Handling"),即结构化异常处理·是(wi ...

  9. 获得同级iframe页面的指定ID元素的几种实现方法

    1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById ...

  10. iOS源码之OC相册,可以循环查看图片

    #import "ViewController.h" #import "YZUIScrollView.h" #define kuan ([UIScreen ma ...