uploadify多个文件上传，并显示进度条

最新推荐文章于 2024-04-30 00:31:32 发布

ConfidentWU

最新推荐文章于 2024-04-30 00:31:32 发布

阅读量2.2k

点赞数

分类专栏： java 计算机

本文链接：https://blog.csdn.net/mengtianqq/article/details/81216878

版权

java 同时被 2 个专栏收录

66 篇文章 0 订阅

订阅专栏

计算机

26 篇文章 0 订阅

订阅专栏

uploadify多个文件上传，并显示进度条。

uploadify是jquery的一个分支。可以实现多个文件上传，还有进度条显示等等。

使用的思路：1.引入jquery-3.3.1.min.js，jquery.uploadify.min.js，uploadify.css，编写出页面

2.安装flash插件，并允许它使用。

3.在后台解析出文件并保持在服务器中。

1.html页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery.uploadify.min.js"></script>
    <link rel="stylesheet" href="uploadify.css">
    <script>
        $(function() {
            $('#file_upload').uploadify({
                'swf': 'uploadify.swf',
                'uploader': 'http://128.23.77.72:8080/frame_mh/portalCommon/uplaodFile',  //后台处理文件
                'auto': false  //是否自动上传
            });
        });
    </script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" multiple enctype="multipart/form-data">
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload Files</a>   <!--上传-->
<a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a>   <!--取消上传-->
</body>
</html>

点击到SELECT FILES控件就可以做到，选择到要上传的文件。再点击Upload Files控件就可以上传文件啦。

页面效果是：

2、后台Java代码：

@RequestMapping("/uplaodFile")
	public void uplaodFile(HttpServletRequest request, PrintWriter writer) throws  IllegalStateException, IOException {
		// 将当前上下文初始化给 CommonsMutipartResolver (多部分解析器)
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
				request.getSession().getServletContext());
		// 检查form中是否有enctype="multipart/form-data"
		if (multipartResolver.isMultipart(request)) {
			// 将request变成多request
			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
			// 获取multiRequest中所有的文件名
			@SuppressWarnings("rawtypes")
			Iterator iter = multiRequest.getFileNames();
			String path = request.getSession().getServletContext()
					.getRealPath("/")
					+ "LoadFile/upLoad";

			File linshi = new File(path);//
			if (!linshi.exists()) {
				linshi.mkdirs();
			}

			while (iter.hasNext()) {
				// 一次遍历所有的文件
				MultipartFile file = multiRequest.getFile(iter.next()
						.toString());
				if (file != null) {
					String fileName  =file.getOriginalFilename().toString();//UUIDTool.getUUID();
					String fn=file.getOriginalFilename().toString();
					int i=fn.lastIndexOf('.'); 
					String  filetype =fn.substring(i, (int)fn.length());
					if(!filetype.equals(".octet-stream")){
						String filepath = path + "/" +fileName;//+ filetype;
						String urlPath ="/LoadFile/upLoad/"+fileName;//+ filetype;//getServiceAddr(request)+"/SaveIcons/"+file.getOriginalFilename();
						// 上传
						file.transferTo(new File(filepath));
						String fileIdName = file.getName();
						/*if ("bigImg".equals(fileIdName)) {

							application.setSysBigIcon(urlPath);
						} else if ("smarterImg".equals(fileIdName)) {
							application.setSysIcon(urlPath);
						}*/
					}
					

				}
			}
		}

	}

后台保存文件到后台服务器中了：

ConfidentWU

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
uploadify多个文件上传，并显示进度条

uploadify多个文件上传，并显示进度条。uploadify是jquery的一个分支。可以实现多个文件上传，还有进度条显示等等。使用的思路：1.引入jquery-3.3.1.min.js，jquery.uploadify.min.js，uploadify.css，编写出页面2.安装flash插件，并允许它使用。3.在后台解析出文件并保持在服务器中。1.html页面代码：...
复制链接

扫一扫