WebUploader文件上传功能与显示进度条不能显示的问题

最新推荐文章于 2022-09-23 09:42:49 发布

置顶 Scott_Yell

最新推荐文章于 2022-09-23 09:42:49 发布

阅读量5.1k

点赞数 6

分类专栏：插件文章标签： Webuploader 进度条

本文链接：https://blog.csdn.net/sinat_36067531/article/details/89919998

版权

插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码

前端代码有两个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 +"&nbsp"+"&nbsp"+"&nbsp"+"&nbsp"+(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>&nbsp;&nbsp;<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);
		
	}

Scott_Yell

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
WebUploader文件上传功能与显示进度条不能显示的问题

直接上代码前端代码有两个ajax一个是为了获取后端传来的本地服务器的文件夹，另一个是为了给后端传前端的select中的值选择了哪个，传给后端。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上传</title><!--引入CSS--...
复制链接

扫一扫