直接上代码
前端代码有两个ajax一个是为了获取后端传来的本地服务器的文件夹,另一个是为了给后端传前端的select中的值选择了哪个,传给后端。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<!--引入JS-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/webuploader.js"></script>
<script type="text/javascript">
var falg=false;
function first(){
$.ajax({
type: "POST",
url:"fileName",
//data:{},
dataType: "json",
success: function (data) {
console.log("进入firstajax函数!!");
for (var i in data) {
// console.log('键:' + i)
console.log('值:' + data[i])
$("#file").append('<option label="'+data[i]+'" value="'+data[i]+'"></option>');
}
},
error: function () {
alert("访问出错");
}
})
}
$(function(){
//下拉框的选择事件
$("#file").change(function(){
alert("初次进入select改变事件");
falg=true;
$.ajax({
type: "POST",
url:"/path",
data:{"name":$(this).children('option:selected').val()},
dataType: "json",
success: function () {
},
error: function () {
alert("访问出错");
}
})
//alert($(this).children('option:selected').val());
})
var $list=$("#thelist");
var $btn =$("#ctlBtn"); //开始上传
var uploader;
// 初始化uploader
uploader = WebUploader.create({
// swf文件路径
swf:'static/js/Uploader.swf',
auto:false, //不自动提交,需要点击
pick: {
id: '#picker',
label: '选择文件',
},
server: '/uploader', //后台接收服务
resize: false,
fileNumLimit:'3',
// formData: { 'guid': GUID }, //额外参数传递,可以没有
chunked: false, //分片
// chunkSize: 10 * 1024 * 1024, //分片大小指定
threads:1, //线程数量
disableGlobalDnd: true ,//禁用拖拽
fileSizeLimit: 100*1024*1024
});
//添加文件页面提示
uploader.on( "fileQueued", function( file ) {
$("#thelist").append("<div id=\"" + file.id + "\" class=\"item\">" +
"<h4 class=\"info\">" + file.name +" "+" "+" "+" "+(file.size/1024/1024).toFixed(1)+'M'+"</h4>"+
"<p class=\"state\">等待上传...</p> "+"<hr/>"+
"</div>");
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
//上传成功
uploader.on( "uploadSuccess", function( file ) {
$( "#"+file.id ).find("p.state").text("已上传");
$('#' + file.id).find('.progress').fadeOut();
});
//上传失败
uploader.on( "uploadError", function( file ) {
$( "#"+file.id ).find("p.state").text("上传出错");
uploader.cancelFile(file);
uploader.removeFile(file,true);
});
//点击上传
$("#ctlBtn").on("click", function() {
if(falg==true){
uploader.upload();
}
else{
alert("未选择文件夹")
}
})
});
</script>
</head>
<body onload="first()">
<div style="text-align: center;">
<label>请选择 要上传的文件夹:</label><br /> <select id="file" name="">
<!-- <option>请选择:</option>
<option>选项 2</option>
<option>选项 3</option>
<option>选项 4</option> -->
</select>
</div>
<div style="text-align: center; border: 1px dashed #000; id="uploader"
class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker" style="margin-top: 20px; text-align: center;">选择文件</div>
<!-- <button id="ctlBtn" class="btn btn-default">开始上传</button> -->
<button id="ctlBtn" class="btn btn-success " type="button">
<i class="fa fa-upload"></i> <span class="bold">上传</span>
</div>
</div>
</body>
</html>
以上代码效果展示:
这个上传的文件是上传到指定的服务器目录,由后端获取返回给前端页面。
在此过程中 遇到的一个坑,进度条显示问题!!!
无论怎么调试进度条就是不显示,而进度条的方法也执行了,后来排查发现 是webUploder中CSS没有写进度条的样式
于是在 webuploader.css 中加入了进度条的样式就可以显示了
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-striped .progress-bar {
background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-size: 40px 40px;
}
.progress-bar {
background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff428bca’,endColorstr=’#ff3071a9’,GradientType=0);
}
.progress-bar {
float: left;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
transition: width .6s ease;
}
其次是我的后端接收文件的代码:
@RequestMapping("uploader")
public void upload(HttpServletRequest request, HttpServletResponse response) {
System.out.println("路径"+upaloadUrl);
System.out.println("下载函数!");
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> files = Murequest.getFileMap();// 得到文件map对象
File dir = new File(upaloadUrl);
System.out.println(upaloadUrl);
if (!dir.exists())// 目录不存在则创建
dir.mkdirs();
for (MultipartFile file : files.values()) {
String fileName = file.getOriginalFilename();
File tagetFile = new File(upaloadUrl + fileName);// 创建文件对象
if (!tagetFile.exists()) {// 文件名不存在 则新建文件,并将文件复制到新建文件中
try {
tagetFile.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
try {
file.transferTo(tagetFile);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
System.out.println("接收完毕");
}
这是将后端获取的文件夹名称 传给前端:
@ResponseBody
@RequestMapping("fileName")
public Map<Object, String> fileName() {
System.out.println("访问了此FileName方法!!!");
Map<Object, String> filesName=new HashMap<>();
File serverFile = new File("E:\\scott\\Load\\");
if (serverFile.isDirectory()) {
File[] files = serverFile.listFiles();
for (int i = 0; i < files.length; i++) {
filesName.put(String.valueOf(i),files[i].getName());
System.out.println("文件夹路径:" + files[i].getName());
}
}
return filesName;
}
这是获取前端下拉框选择的值:
@ResponseBody
@RequestMapping("path")
public void filePath(String name){
upaloadUrl = "E:\\scott\\Load\\";
upaloadUrl=upaloadUrl+name+"\\";
System.out.println("访问了路径方法!!"+upaloadUrl);
}