[JAVA - JSP - AJAX] Inviare una richiesta di upload file (apache commons)tramite ajax

[maco_isi]

ciao a tutti
Sto cercando di gestire l'upload dei file tramite le librerie apache commons inviando la richiesta alla servlet tramite una funzione Ajax.

Premetto che se non passo per ajax, quindi se faccio il post del form mi carica un'altra pagina (quella generata dalla servlet) e i file risultano correttamente caricati sul server.
Io, proprio sfruttando ajax, vorrei che la nuova pagina generata dalla servlet venga ricaricata in una data <div> quindi senza nessun refresh/caricamento nuova pagina.

queste le parti di codice interessate:

        FUNZIONE JAVASCRIPT

	function uploadFile(target, resource, formID)
	{
		var elements = form.elements;
		var queryStr = "";
		var addAttr = "";
		
		for(i=0; i<elements.length; i++)
		{
			var elem = elements[i];
			if(null != elem.name && elem.type != "button" && elem.type != "submit")
			{
				queryStr += addAttr + elem.name + "=" + elem.value;
				addAttr = "&";
			}
		}
		
		$('pro').innerHTML = queryStr;
		
		if(XMLHttpRequestObject)
		{
			var obj = $(target);
			XMLHttpRequestObject.open("POST", resource);
			XMLHttpRequestObject.setRequestHeader("Content-Type", "multipart/form-data");
			XMLHttpRequestObject.onreadystatechange = function()
			{
				if (XMLHttpRequestObject.readyState == 1)
				{
					$('info').innerHTML = "<img src=\"images/progress.gif\" > Attendere ...";
				}
				else
				{
					if(XMLHttpRequestObject.readyState == 4)
						if(XMLHttpRequestObject.status == 200 || XMLHttpRequestObject.status == 0)
						{
							obj.innerHTML = XMLHttpRequestObject.responseText;
							$('info').innerHTML = '';
						}
						else
						{
							obj.innerHTML = "Risposta inattesa: HTTP STATUS CODE " + XMLHttpRequestObject.status + "
" + obj.innerHTML;
							$('info').innerHTML = '';
						}
				}
			}
			XMLHttpRequestObject.send(queryStr);
		} 
	}

Form nella pagina jsp:

	<form method="POST" action="UploadFile" enctype="multipart/form-data" id="uploadForm">
	    <table align="center" border="0"style="border-bottom-style: groove; border-bottom-width: 1; border-right-style: groove; border-right-width: 1; border-bottom-color: olive; border-right-color: olive;">
	        <tr>
	            <td width="55" align="center" style="border-left-style: dashed; border-left-width: 1; border-left-color: olive;">foto 1</td>
	            <td><input name="foto1" type="file" size="60"></td>
	        </tr>
	        <tr>
	        	<td align="center" style="border-left-style: dashed; border-left-width: 1; border-left-color: olive;">foto 2</td>
	            <td><input name="foto2" type="file" size="60"></td>
	        </tr>
	        <tr>
	        	<td colspan="2" align="center">
	            	<input type="submit" name="salva" value="salva">
	            	<input type="button" name="ajax" value="ajax" onclick="uploadFile('target', 'UploadFile', 'uploadForm')">
	        	</td>
	        </tr>
	    </table>
	</form>

E questo è il Post della servlet (che ripeto funziona se non passo per ajax):

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		DiskFileItemFactory factory = new DiskFileItemFactory();
		String path = this.getServletContext().getRealPath(".");
		
		factory.setRepository(new File(path + "/WEB-INF/tmp"));
		ServletFileUpload upload = new ServletFileUpload(factory);
		
		try 
		{
			List items = upload.parseRequest(request);
			Iterator iter = items.iterator();
			LocalProperties localProperties = LocalProperties.getInstance();
			Map mappaParam = new HashMap();
			Map fileScritti = new HashMap();
			
			while (iter.hasNext())
			{
			    FileItem item = (FileItem) iter.next();
			    
		    	if(!item.isFormField())
			    {
		    		String itemName = item.getName();
			    	itemName = itemName.substring(itemName.lastIndexOf(File.separator) + 1, itemName.length());
		    	    if(null != itemName && itemName.length() > 0)
		    	    {
		    	    	File uploadedFile = new File(path + localProperties.getLocatTmpDir() + itemName);
		    	    	item.write(uploadedFile);
		    	    	InputStream inStream = this.getServletContext().getResourceAsStream(itemName);
		    	    	fileScritti.put(itemName, inStream);
		    	    }
			    }
		    	else
		    	{
		    	    String name = item.getFieldName();
		    	    String value = item.getString();
		    	    mappaParam.put(name, value);
		    	}
			}
...

Passando per Ajax, le commons sparano questa eccezione:

org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
	at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:324)
	at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:116)
	at servlets.UploadFile.doPost(UploadFile.java:63)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:709)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:237)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:157)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:214)
	at org.apache.catalina.core.StandardValveContext.invokeNext(StandardValveContext.java:104)
	at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:520)
	at org.apache.catalina.core.StandardContextValve.invokeInternal(StandardContextValve.java:198)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:152)
	at org.apache.catalina.core.StandardValveContext.invokeNext(StandardValveContext.java:104)
	at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:520)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:137)
	at org.apache.catalina.core.StandardValveContext.invokeNext(StandardValveContext.java:104)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:118)
	at org.apache.catalina.core.StandardValveContext.invokeNext(StandardValveContext.java:102)
	at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:520)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
	at org.apache.catalina.core.StandardValveContext.invokeNext(StandardValveContext.java:104)
	at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:520)
	at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:929)
	at org.apache.coyote.tomcat5.CoyoteAdapter.service(CoyoteAdapter.java:160)
	at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:799)
	at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.processConnection(Http11Protocol.java:705)
	at org.apache.tomcat.util.net.TcpWorkerThread.runIt(PoolTcpEndpoint.java:577)
	at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:683)
	at java.lang.Thread.run(Thread.java:534)

Qualcuno sa come posso risolvere ???

Grazie mille!!

[citrus]

ciao, non sono stato a leggere tutto perchè ho poco tempo
però, così su due piedi, posso dirti che potrebbe esserci un errore di concetto....

con ajax infatti non è possibile inviare file sul server.
in passato per risolvere il problema ho usato uno stratagemma di questo tipo:

ho creato un piccolo iframe senza bordi (grande giusto quanto il campo file di modo che non se ne noti la presenza) contenente il campo di tipo file che all'onchange invia tramite il classico metodo POST del protocollo http il file sul server.
In questo modo non si noterà il refresh della pagina che avviene cmq ma solo dentro al piccolo iframe.
una volta caricato puoi fare in modo che la pagina contenuta nell'iframe (quella che ha caricato il file) vada a scrivere in un hidden nascosto nella pagina "parent" se l'operazione è andata a buon fine o meno...

a questo punto puoi fare il submit del form principale tramite ajax.. il file sarà già sul server che ti aspetta

spero di esserti stato d'aiuto
ciao
citruz

[Andrea1979]

Originariamente inviato da citrus
con ajax infatti non è possibile inviare file sul server.
in passato per risolvere il problema ho usato uno stratagemma di questo tipo:

ho creato un piccolo iframe senza bordi (grande giusto quanto il campo file di modo che non se ne noti la presenza) contenente il campo di tipo file che all'onchange invia tramite il classico metodo POST del protocollo http il file sul server.

Esatto. L'iframe addirittura può anche essere 1px x 1px e con display:none, non ha davvero importanza. Basta che sia il target del form di upload.

[maco_isi]

ciao ....

grazie mille ad entrambi, avevo risolto proprio in questo modo! purtroppo non ero stato avvisato della risposta di citrus .... scusa se non ti ho risposto


Grazie ancora ...
ciao!

[camionistaxcaso]

Ciao ragazzi, sono commosso a vedere tutta sta gente appassionata di ste cose
Leggendo la soluzione dell' iFrame inserito che manda la richiesta al server senza che si ricarichi la pagina, mi sorge questo dubbio: il tag <iframe> è standard? Viene letto da tutti i browser? Ciao a tutti

[dr_awesome]

-