Javaweb+ajax implementing file Uploads

Preparation: We need to find a green or other color of the background map, put in the photo folder is good, and then add Jar:common-io and Commo-fileupload can ha

To create a progress.css file:

. pro{height:15px;  width:500px;  Background: #FFFFF0;  border:1px solid #8FBC8F;  margin:0;  padding:0;  Display:none;  position:relative;  left:25px; Float:left;}

Create Uploadajax.js

function Go () {f1.submit (); document.getElementById ("Pro"). style.display= "Block"; document.getElementById ("prop"). Style.display= "";  Timer=setinterval ("Getp ()", 50); } var xmlhttprequest;function getp () {if (window. XMLHttpRequest) {xmlhttprequest=new XMLHttpRequest ();}    else{xmlhttprequest=new ActiveXObject ("Microsoft.XMLHTTP");}  Xmlhttprequest.onreadystatechange=callback; Url= "Getprogressservlet";   Xmlhttprequest.open ("Post", url,true); Xmlhttprequest.setrequestheader ("Content-type", "application/x-www-form-urlencoded");   Xmlhttprequest.send ("&timestamp=" + (new Date ()). GetTime ()); }//callback function CallBack () {if (xmlhttprequest.readystate==4 && xmlhttprequest.status==200) {RESULT=XMLHTTPR  Equest.responsetext; var result=result.replace (/(^\s*) | (  \s*$)/g, "");  var res=result.split (",");   var flag=res[1];  var per=parseint (res[0]);  var err=res[2];  document.getElementById ("Imgpro"). style.width=per*5+ "px";  document.getElementById ("prop"). innerhtml=per+ "%"; if (flag== "OK") {Window.clearinterval (timer); Alert ("Upload successful!   ");   document.getElementById ("Pro"). style.display= "None";   document.getElementById ("prop"). innerhtml= "";  F1.reset (); } if (err!= "" | |   err.length>0) {window.clearinterval (timer);  alert (ERR);  } if (Flag==null) {window.clearinterval (timer); } }}

Invoke and introduce

<link rel= "stylesheet" type= "Text/css" href= "Css/progress.css" >
<script type= "Text/javascript" src= "Js/uploadajax.js" charset= "UTF-8" ></script>

<div class= "Am-g" > <div class= "am-u-sm-12" align= "left" > <div class= "am-form-group" ><form Act ion= "<%=basepath%>uploadspotimgservlet" name= "F1" id= "F1" method= "post" enctype= "Multipart/form-data" target= "If" > <div class= "field" > <a class= "button Input-file" href= "javascript:void (0);" >+ Browse Files <input size= "type=" "File" name= "logo" data-validate= "Required: Please select Upload file, regexp#.+. (jpg|jpeg|png|gif) $: can only upload jpg|gif|png format file "/></a> </div> <br> <i Nput type= "reset" name= "res1" value= "reset" class= "am-btn am-btn-primary"/> <input type= "submit" name= "bu T1 "value=" submit "onclick=" Go (); "class=" am-btn am-btn-primary "/></form><br><div id=" Pro "class=" Pro " Align= "left" style= "height:1px;width:600px;" > </div> <span id= "prop" style= "width : 15px;height:15px;display:none; " >0%</span> <br><br><iframe id= "If" name= "if" src= "style=" Display:none "></iframe> & Lt;/div> </div> </div>

Create Uploadspotimgservlet

public class Uploadspotimgservlet extends HttpServlet {/** * */private static final long serialversionuid = 1l;private St Ring filename;private File tempfile;protected void doget (HttpServletRequest request, httpservletresponse response) Throws Servletexception, IOException {//Set the encoding format to Utf-8response.setcontenttype ("Text/html;charset=utf-8"); PrintWriter out1 = Response.getwriter () request.setcharacterencoding ("UTF-8");//Get session, save progress and upload results, the initial value of the upload is NOK, When the upload completes for OK httpsession session=request.getsession (); Session.setattribute ("prog", "0"); Session.setattribute (" Result "," NOK "); Session.setattribute ("Error", ""); String error= "";//Set a maximum value for the uploaded file, here is not more than 50MBint maxsize=50*1024*1024;//Create factory object and File upload object Diskfileitemfactory factory=new Diskfileitemfactory (); Servletfileupload upload=new servletfileupload (factory); try {//Parse upload request list items=upload.parserequest (request); I       Terator Itr=items.iterator ();    while (Itr.hasnext ()) {Fileitem item= (Fileitem) itr.next (); Determines whether the file domain if (!item.isformfield ()) {IF (Item.getname ()!=null&&!item.getname (). Equals ("")) {//Get upload file size and file name Long upfilesize=item.getsize ();      Filename=item.getname ();       if (upfilesize>maxsize) {error= "The file you uploaded is too large, please select No more than 50MB files!";      Break      }//The file temporarily exists in the server's memory, constructing the temporary object Tempfile=new file (fileName); Specifies the directory and file name of the file-upload server, filename file=new file ("D:\\myeclipse\\workspace\\tourismsystemserver\\webroot\\source\\images",      Tempfile.getname ());      Construct input stream Read file InputStream is=item.getinputstream ();      int length=0;      Byte[] By=new byte[1024];      Double persent=0;      FileOutputStream fos=new fileoutputstream (file);      PrintWriter Out=response.getwriter ();       while ((Length=is.read)!=-1) {//Calculate file Progress persent+=length/(double) upfilesize*100d;       Fos.write (by, 0, length);        Session.setattribute ("prog", Math.Round (persent) + "");      Thread.Sleep (10);      } fos.close ();     Thread.Sleep (1000); }else{error= "did not choose to upload files!     "; }}} CoNstant.  Imgpath.path = "/source/images/" +tempfile.getname ();   System.out.println (Constant.ImgPath.path);   Response.sendredirect (Constant.web_url_addspotinfo); } catch (Exception e) {e.printstacktrace (); error= "An error occurred while uploading the file:" +e.getmessage ();} if (!error.equals (")") {Session.setattribute ("error", error);} Else{session.setattribute ("Result", "OK");} Out1.flush (); Out1.close ();} protected void DoPost (HttpServletRequest request, httpservletresponse response) throws Servletexception, IOException { Doget (request, Response);}}

OK, so that we can upload files to our established folder Oh, and the combination of Ajax, there will be no page refresh situation Oh!



Javaweb+ajax implementing file Uploads