WebUploader⽂件上传功能与显⽰进度条不能显⽰的问题直接上代码
前端代码有两个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("访问出错");
}
})
jquery下载文件进度条}
$(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 = ate({
// 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
});
//添加⽂件页⾯提⽰
<( "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>");
});
// ⽂件上传过程中创建进度条实时显⽰。
<('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" >' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
//上传成功
ps花边边框素材( "uploadSuccess", function( file ) {
$( "#"+file.id ).find("p.state").text("已上传");
$('#' + file.id).find('.progress').fadeOut();
});
//上传失败
<( "uploadError", function( file ) {
$( "#"+file.id ).find("p.state").text("上传出错");
uploader.cancelFile(file);
});
//点击上传
$("#ctlBtn").on("click", function() {
if(falg==true){
uploader.upload();
else{
alert("未选择⽂件夹")
}
})
});
</script>
</head>
<body onload="first()">
<div >
<label>请选择要上传的⽂件夹：</label><br /> <select id="file" name="">
<!-- <option>请选择：</option>
<option>选项 2</option>
<option>选项 3</option>
<option>选项 4</option> -->
</select>
</div>
<div uploader"
class="wu-example">
<!--⽤来存放⽂件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker" >选择⽂件</div>
<!-- <button id="ctlBtn" class="btn btn-default">开始上传</button> -->
printf函数的作用是向终端<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) 7 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:adient(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);
getsslpageSystem.out.println("下载函数!");
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> files = FileMap();// 得到⽂件map对象 File dir = new File(upaloadUrl);
System.out.println(upaloadUrl);
if (!ists())// ⽬录不存在则创建
dir.mkdirs();
for (MultipartFile file : files.values()) {
String fileName = OriginalFilename();
File tagetFile = new File(upaloadUrl + fileName);// 创建⽂件对象
if (!ists()) {// ⽂件名不存在则新建⽂件，并将⽂件复制到新建⽂件中 try {
} catch (IOException e) {
e.printStackTrace();
}
try {
} 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;
}
java的bigdecimal这是获取前端下拉框选择的值：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论