Utilisation de jQuery File Upload

**Raz-X** · 07/05/2015, 11h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ruscov** · 03/07/2015, 13h30

Il faut que tu sorte de ta jsp la partie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<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>

Et que ta méthode upload renvoie une page contenant ce code.
Ensuite tu charges le contenu dans ta page actuelle.

**Raz-X** · 03/07/2015, 14h16

Je ne suis pas sûr d'avoir saisi...

En gros, j'enlève le code permettant l'affichage de ma page unique, et après:
- je crée une autre jsp pour mettre ce code?
- j'inclue cette jsp dans ma page unique?
- comment est ce que je recharge uniquement cette page?
- dois-je réaliser le rechargement de la page via Swing MVC, ou bien via le javascript de jQuery Upload?

En tout cas merci de ton aide

**ruscov** · 03/07/2015, 17h18

En gros, tu crées une page JSP contenant le code. Appelons la versionsList.jsp. Tu peux inclure cette page dans ta page principale (updateServiceManager.jsp).
disons que tu met un div autour de ton inclusion.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="versionsList>
   <jsp include versionsList.jsp />
</div>

Au premier chargement, versionsList.jsp sera chargé également.
Ensuite la deuxième partie, le traitement du retour après upload. Le retour est ta page versionsList.jsp
Dans ton code javascript, tu dois faire un truc du style $('#versionsList').html([ton retour]);
Je ne connais pas les fonctions dispo pour fileUpload, mais si c'est https://github.com/blueimp/jQuery-Fi...i/Basic-plugin alors tu as done: function (e, data).
Alors j'imagine que c'est $('#versionsList').html(data);

J'espère avoir été plus précis et clair

**Raz-X** · 06/07/2015, 15h52

Merci Ruskov,

j'ai réalisé tout cela, et ça fonctionne plutôt bien.

Cependant il me reste un détail qui ne va pas, c'est le rechargement de la page après l'upload (via fileupload.done).
Je crois que je n'ai pas bien compris l'enchaînement entre le Controller de Swing MVC qui récupère la demande, son retour, et la manière dont j'interprète ça dans jquery fileupload.

J'ai fait ceci:
upload.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function () {
    $('#fileupload').fileupload({
        maxNumberOfFiles: '1',
 
        done: function (e, data) {
        	$('#updatedAppList').html(data);
        },
 
        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...')
            }
        },
    });
});

updatedAppList.jsp

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<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>

updateServiceManager.jsp

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<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>

uploadController.java

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@RequestMapping(value = "/upload", method = RequestMethod.POST)
	public String upload(MultipartFile file,
			HttpServletResponse responsel, ModelMap model) {
 
			LOG.debug(file.getOriginalFilename() + " uploaded!");
return "updateAppList";
	}

Je ne comprends pas trop comment gérer le retour pour mettre ma liste à jour...

**ruscov** · 07/07/2015, 09h25

Ta page updateServiceManager.jsp, c'est ta page principale qui contient tout le tralala html comme tu avais dans ton premier post.
Tout ton code qui contient la liste de tes app est dans updatedAppList.jsp. Dans ta page updateServiceManager.jsp de ton premier post, tu remplace la liste des app par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="updatedAppList">
<jsp include updatedAppList.jsp/>
</div>

Comme ça au premier affichage, c'est chargé normalement. Et à la fin de l'upload, tu remplis ton div par le retour de Spring MVC qui te fournit updatedAppList.jsp. Et avec jquery tu charge les données dans ta page actuelle sans la recharger.

Utilisation de jQuery File Upload

Spring Web Java

Discussions similaires

Partager

Partager