Discussion :

[toztoztoze]

Je voudrais télécharger une image et poster d'autres variables vers la servlet et je n'ai aucune erreur dans ajax, par-contre l'image n'est jamais enregistrée.

Voilà mon form

Code html :

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

1
2
3
4
5
 
<form id="formAddProduit" enctype="multipart/form-data" method="post" action="">
            <input type="file" name="img[]" id="img" />
            <input type="button" id="btn_add_produit" value="Ajouter produit"/>
        </form>

voici ma fonction jQuery ajax :

Code javascript :

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
 
 
$("#formAddProduit #btn_add_produit").click(function(e){
                   e.preventDefault();
                   var fd=new FormData();
                   console.log("image :",$("#img").get(0).files[0]);
                   fd.append("img",$("#img").get(0).files[0]);
                    fd.append("role","addproduit");
                    $.ajax({
                        url:"Ajax",
                        method:"POST",
                        dataType:"json",
                        processData: false, 
                        contentType :false,
                        data:fd
 
                    })
                    .done(function(data){
                        console.log("Done :",data);
                    })
                    .fail(function(err){
                        alert("Erreur addproduit ajax :",err.responseText);
                    });
                });

voici ma servlet :

Code java :

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
74
75
 
else if(request.getParameter("role").equals("addproduit")) {
 
 
 
 
      FileItemFactory factory = (FileItemFactory) new DiskFileItemFactory();
      ServletFileUpload upload = new ServletFileUpload(factory);
 
 
      List
         uploadedItems = null;
      FileItem
         fileItem = null;
      String
         // Path to store file on local system
         filePath = "C:\\Users\\hp\\Documents\\NetBeansProjects\\Site_achat_enligne_5emeannee\\web\\img\\uploadFiles";
 
      try
      {
         // iterate over all uploaded files
         uploadedItems = upload.parseRequest(request);
 
         Iterator
            i = uploadedItems.iterator();
 
         while (i.hasNext())
         {
             ind.put("nom_fichier","teste....");
            fileItem = (FileItem) i.next();
 
            if (fileItem.isFormField() == false)
            {
               if (fileItem.getSize() > 0)
               {
                  File
                     uploadedFile = null;
                  String
                     myFullFileName = fileItem.getName(),
                     myFileName = "",
                     slashType = (myFullFileName.lastIndexOf("\\")
                        > 0) ? "\\" : "/";    // Windows or UNIX
 
                  int
                     startIndex =
                        myFullFileName.lastIndexOf(slashType);
 
                  // Ignore the path and get the filename
                  myFileName = myFullFileName.substring
                    (startIndex + 1, myFullFileName.length());
 
                  // Create new File object
                  uploadedFile = new File(filePath, myFileName);
 
                  // Write the uploaded file to the system
                  fileItem.write(uploadedFile);
               }
            }
         }
      }
      catch (FileUploadException e)
      {
          ind.put("erreurUpload","erreur upload");
         e.printStackTrace();
      }
      catch (Exception e)
      {
          ind.put("erreurExcep","erreur excep");
         e.printStackTrace();
      }
            json= new Gson().toJson(ind);
           response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(json);  
        }

Le problème se situe dans la ligne 27 du code servlet, parce que je ne reçois pas la variable ind dans le success d'ajax.

Si je la met avant le while dans ce cas je reçois bien la variable ind.

Pourquoi le script n'entre pas dans la boucle while ?!

[Toufik83]

Salut,

Oublis l'iterator et essaies ce code (il est testé et fonctionnel):

Code html :

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

1
2
3
4
5
 
<form id="form" action="" method="post" enctype="multipart/form-data">
	<input type="file" name="file" />
	<input type="submit" />
</form>

Code java :

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
 
import javax.servlet.*;
import java.io.*;
import java.sql.*;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.Part;
 
@WebServlet("/UploadServlet")
@MultipartConfig(fileSizeThreshold= 1024 * 1024 * 2,
maxFileSize=1024*1024*10,
maxRequestSize=1024*1024*50
)
public class Upload extends HttpServlet{
 
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out=response.getWriter();
		Part part =request.getPart("file");
		String filename=extractFileName(part);
		String savePath="C:\\xampp\\htdocs\\Projets-JAVA2EE\\P-Nawfal\\uploadsImages\\"+File.separator+filename;/*ici tu dois mettre le chemin de ton dossier dans lequel tu veux 
                mettre tes images */
		File fileSaveDir=new File(savePath);
		part.write(savePath+File.separator);//sauvegarde du fichier
		/*Il reste aussi la vérification du type-mime du fichier si tu ne veux accepter que les images...*/
	}
 
	private String extractFileName(Part p){
		String contentDisp=p.getHeader("content-disposition");
		String[] items=contentDisp.split(";");
		for(String s: items){
			System.out.println("s :"+s.trim());
			if(s.trim().startsWith("filename")){
				return s.substring(s.indexOf("=")+2,s.length()-1);
			}
		}
		return null;
	}
}

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(function(){
	  $("#form").submit(function(e){
		e.preventDefault();
		var formdata=new FormData();
		formdata.append('file',$(this).find('[name="file"]').get(0).files[0])
		$.ajax({url:"upload",method:"post",data:formdata,contentType:false,processData:false})
			.done(function(s){
				console.log("done :",s);
			})
			.fail(function(err){alert("erreur ajax :"+err.responseText);});
          });
});

Le nom de la servlet est UploadServlet comme il est indiqué à la ligne 12 du code servlet.
Il faut s'assurer aussi que ces lignes existent bien dans le fichier web.xml

Code xml :

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

1
2
3
4
5
6
7
8
9
 
<servlet>
	<servlet-name>UploadServlet</servlet-name>
	<servlet-class>Upload</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>UploadServlet</servlet-name>
	<url-pattern>/upload</url-pattern>
</servlet-mapping>

Pour l'instant ajax est lancée avec le dataType par défaut (html), si tu veux le faire en "json" il est nécessaire d'utiliser une classe qui écrit du json comme Gson() par exemple et renvoyer le résultat du servlet dans un HashMap.