Utilisation de jQuery File Upload
Bonjour à tous,
j'essaye de créer un petit service d'update pour une application. Ce que je souhaite réaliser:
1- Uploader un fichier zip vers le serveur
2- Le serveur traite le zip, et mets à jour la base de données
3- Le serveur renvoie la page avec les nouvelles informations mises à jour
J'ai réussi les étapes 1 et 2, mais je n'arrive pas à rafraîchir la page (application web avec une seule et même page). Voici mes controllers, ma jsp, et mon code js pour la gestion de l'upload.
UploadController
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
@Controller
public class UploadController {
private static final Logger LOG = LoggerFactory
.getLogger(UploadController.class);
@RequestMapping(value="/upload", method = RequestMethod.GET)
public String uploadResult(ModelMap model) {
model.addAttribute("updated",true);
return "updateServiceManager";
}
/***************************************************
* URL: /upload upload(): receives files
*
* @param request
* : MultipartHttpServletRequest auto passed
* @param response
* : HttpServletResponse auto passed
* @return void
****************************************************/
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(MultipartHttpServletRequest request,
HttpServletResponse responsel) {
Iterator<String> itr = request.getFileNames();
MultipartFile mpf = null;
while (itr.hasNext()) {
mpf = request.getFile(itr.next());
LOG.debug(mpf.getOriginalFilename() + " uploaded!");
/** Traitement **/
}
return "redirect:/upload";
}
} |
updateServiceManager.jsp (jQuery et jQuery File Upload sont chargés correctement dans footer.jsp)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<c:import url="head.jsp" />
</head>
<body>
<c:import url="navbar.jsp" />
<div class="container">
<div class="starter-template">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Nouvelle version</h3>
</div>
<div class="panel-body text-center">
<button type="button" class="btn btn-success btn-file btn-lg">
<span class="glyphicon glyphicon-upload">
</span> Upload
<input
id="fileupload" type="file" name="file" accept="application/zip"
data-url="<c:url value='/upload'/>" />
</button>
<div id="progress-container"
class="progress progress-striped active hidden">
<div id="progress-bar" class="progress-bar progress-bar-info"
role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100" style="width: 0%"></div>
</div>
</div>
</div>
<c:forEach items="${applications}" var="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">${app.getName()}</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Version</th>
<th>Type</th>
<th>Date</th>
</tr>
</thead>
<c:forEach items="${app.getVersions()}" var="version">
<tr>
<td>${version.getVersionNumber()}</td>
<c:if test="${version.isBeta()}">
<td>Beta</td>
</c:if>
<c:if test="${!version.isBeta()}">
<td>Release</td>
</c:if>
<td>${version.getCreationDate()}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</c:forEach>
</div>
<c:import url="footer.jsp" />
</div>
</body>
</html> |
upload.js (pour la gestion de la pogressbar lors de l'upload)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $(function () {
$('#fileupload').fileupload({
maxNumberOfFiles: '1',
start: function (e, data) {
$('#progress-container').attr('class',"progress");
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress-bar').css('width',progress + '%').attr('aria-valuenow',progress).text(progress+'%');
if(progress==100){
$('#progress-container').attr('class',"progress progress-striped active");
$('#progress-bar').text('Mise à jour...')
}
},
});
}); |
Des idées sur la bonne manière de réafficher ma page updateServiceManager.jsp APRES l'envoi du fichier?
Merci d'avance de votre aide
