ssm上传文件进度条_SSM+Bootstrap+Ajax实现页面无刷新带进度条多文件上传（超详细备注）...

SSM+Bootstrap+Ajax实现页面无刷新带进度条多文件上传(超详细备注)

发布时间：2018-08-13 21:43,

浏览次数：607

, 标签：

SSM

Bootstrap

Ajax

SSM要想实现文件上传，需要在Spring-MVC.xml文件里添加如下配置

class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

需要导入两个jar包

下面是jsp页面:由于引用的全是网络上的cdn，需要联网后食用！

pageEncoding="utf-8"%>

basePath = request.getScheme() + "://" + request.getServerName() + ":" +

request.getServerPort() + path + "/"; %>

http-equiv="Content-Type" content="text/html; charset=utf-8">

Insert

title here

href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

crossorigin="anonymous">

name="file" />

οnclick="UpladFile()" value="上传" />

role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"

style="width: 0%">

后台controller方法

@RequestMapping(value = "/upload.do", method = RequestMethod.POST) public

String upload(HttpServletRequest request, @RequestParam("file") MultipartFile[]

file, ModelMap model) { System.out.println("开始"); String path =

request.getSession().getServletContext()

.getRealPath("upload");//获取当前项目下的upload for (int i = 0; i < file.length; i++) {

String fileName = file[i].getOriginalFilename();//获取文件名 // String fileName =

new Date().getTime()+".jpg";//替换新名字 System.out.println(path); File targetFile =

new File(path, fileName);//判断文件是否存在，不存在则创建，可创建文件夹 if (!targetFile.exists()) {

targetFile.mkdirs(); } // 保存 try { //使用transferTo(dest)方法将上传文件写到服务器上指定的文件。

file[i].transferTo(targetFile);//此方法在上传完成后才开始上传 } catch (Exception e) {

e.printStackTrace(); } } // model.addAttribute("fileUrl",

request.getContextPath() + "/upload/" // + fileName); return "index"; }

效果图

多文件上传时，进度条进度为所有文件总进度。

这个进度为写入tomcat的temp文件夹内的进度，到达百分之百后才从temp文件夹移至目标路径。

参考网页地址：https://www.jb51.net/article/103365.htm