Ajax and JSP implementation of web-based file upload Progress Control code 1th/2 page _ajax related

Source: Internet
Author: User
Tags file upload file url stringbuffer
1. Introduction
2. Implement code
2.1. server-side code
2.1.1. File Upload Status Class (Fileuploadstatus)
2.1.2. File Upload Status Listening class ( Fileuploadlistener)
2.1.3. Background service class (Backgroundservice)
2. 1.4. File Upload Status Control class (Beancontroler)
2.2. Client code
2.2.1. ajaxwrapper.js
2.2.2. fileupload.html
2.2.3. result.jsp
2.2.4. Fileupload.css
2.3. configuration file
3. Conclusion
<iframe name="google_ads_frame" marginwidth="0" marginheight="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1832179689702023&dt=1179588917140&lmt=1179546942&format=336x280_as&output=html&correlator=1179588917140&channel=7111701428&url=http%3A%2F%2Fwww.java3z.com%2Fcwbwebhome%2Farticle%2Farticle5%2F5779.html%3Fid%3D1379&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=3D81EE&color_border=FFFFFF&ad_type=text_image&ref=http%3A%2F%2Fwww.java3z.com%2Fcwbwebhome%2Ftype.jsp%3Ftype%3Dajax&cc=99&flash=9&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=480&u_java=true" frameborder="0" width="336" scrolling="no" height="280" allowtransparency=""></iframe>

1. Introduction

Browser-based file uploads, especially for uploading via <input type= "file" > tags, have serious performance problems because after the user submits the file, the interface appears to be stationary as the browser uploads the file to the server. If the small file is better, if the unfortunate need to upload a few megabytes, a few 10 trillion or even hundreds of megabytes of documents, I believe that it is a very painful experience, many of us should have had this kind of unbearable experience. (A Smile)

Now I'm going to give a solution to this problem, and we'll implement a monitoring web upload program that not only uploads files to the server, but also "real-time" monitoring of the actual process of file uploads.

The basic idea of the solution is this:

    • Use Ajax to periodically poll upload status information from the servlet while the form submits the upload file
    • Then, update the progress bar and related text according to this information, reflect the file transfer status in time
    • If the user cancels the upload operation, then carries on the corresponding scene cleanup work: Deletes has uploaded the file, displays the related information in the form submission page
    • If uploaded, show the content (or link) of the uploaded file

Before we introduce the source code, let's take a look at the program running interface:

2. Implementation code

The implementation code assumes that there are server-side code and client code (hehe), we first start from the server side.

2.1. Server-side code

2.1.1. File Upload Status Class (Fileuploadstatus)

Use the Fileuploadstatus class to record file upload status as a medium for server-side communication with Web clients, sending the upload status as a server response to the Web client by providing this class object, Web clients use JavaScript to get file upload status. The source code is as follows:

/** * This routine demonstrates the progress shown in the process of uploading files over the web.
 You can make any modifications and use of this routine.
 * If you need to reprint this routine, please indicate the author.
* Author: Liu * email:liuzuochen@gmail.com * * Package liuzuochen.sample.upload;
Import java.util.*;
  public class Fileuploadstatus {//upload user address private String uploadaddr;
  Upload Total private Long uploadtotalsize = 0;
  Total read upload private long readtotalsize = 0;
  Current upload file number private int currentuploadfilenum = 0;
  Number of uploaded files successfully read private int successuploadfilecount = 0;
  State private String status = "";
  Processing start time private long processstarttime = 0l;
  Processing termination time Private long processendtime = 0l;
  Processing execution time Private long processrunningtime = 0l;
  Upload file URL list private list uploadfileurllist = new ArrayList ();
  Cancel Upload Private Boolean cancel = false;
  Upload the base directory private String BaseDir = "";
  Public Fileuploadstatus () {} public String Getbasedir () {return baseDir;
  } public void Setbasedir (String baseDir) {this.basedir = BaseDir;
  public Boolean getcancel () {return cancel; } pUblic void Setcancel (Boolean cancel) {this.cancel = cancel;
  Public List getuploadfileurllist () {return uploadfileurllist;
  The public void Setuploadfileurllist (List uploadfileurllist) {this.uploadfileurllist = uploadfileurllist;
  Public long Getprocessrunningtime () {return processrunningtime;
  } public void Setprocessrunningtime (long processrunningtime) {this.processrunningtime = Processrunningtime;
  Public long Getprocessendtime () {return processendtime;
  } public void Setprocessendtime (long processendtime) {this.processendtime = Processendtime;
  Public long Getprocessstarttime () {return processstarttime;
  } public void Setprocessstarttime (long processstarttime) {this.processstarttime = Processstarttime;
  Public long Getreadtotalsize () {return readtotalsize;
  } public void Setreadtotalsize (long readtotalsize) {this.readtotalsize = readtotalsize;
public int Getsuccessuploadfilecount () {    return successuploadfilecount; } public void Setsuccessuploadfilecount (int successuploadfilecount) {This.successuploadfilecount = Successuploadfil
  Ecount;
  public int Getcurrentuploadfilenum () {return currentuploadfilenum;
  The public void setcurrentuploadfilenum (int currentuploadfilenum) {this.currentuploadfilenum = Currentuploadfilenum;
  Public String GetStatus () {return status;
  public void SetStatus (String status) {this.status = status;
  Public long Getuploadtotalsize () {return uploadtotalsize;
  Public String getuploadaddr () {return uploadaddr;
  } public void Setuploadtotalsize (long uploadtotalsize) {this.uploadtotalsize = uploadtotalsize;
  } public void Setuploadaddr (String uploadaddr) {this.uploadaddr = uploadaddr;
    Public String Tojson () {StringBuffer Strjson = new StringBuffer (); Strjson.append ("{uploadtotalsize:"). Append (Getuploadtotalsize ()). Append (","). Append ("Readtotalsize: "). Append (Getreadtotalsize ()). Append (", "). Append (" Currentuploadfilenum: "). Append (
        Getcurrentuploadfilenum ()).
        Append (","). Append ("Successuploadfilecount:"). Append (Getsuccessuploadfilecount ()). Append (",") . Append ("Status:"). Append (GetStatus ()). Append ("',"). Append ("Processstarttime:"). Append (Getprocessstarttime ())
        . Append (","). Append ("Processendtime:"). Append (Getprocessendtime ()). Append (","). Append ("Proce
        Ssrunningtime: "). Append (Getprocessrunningtime ()).
    Append (","). Append ("Cancel:"). Append (Getcancel ()). Append ("}");
  return strjson.tostring ();
 }
}

2.1.2. File Upload Status Listening class (Fileuploadlistener)

Use the Common-fileupload 1.2 version (20070103). This release provides a processlistener interface to monitor file uploads, allowing developers to embed their listener through the Setprocesslistener method of Fileuploadbase class objects. The Fileuploadlistener class implements the Processlistener, in the entire file uploads the process, it monitors the upload progress, and according to the upload situation real-time updates uploads the state bean. The source code is as follows:

/** * This routine demonstrates the progress shown in the process of uploading files over the web.
 You can make any modifications and use of this routine.
 * If you need to reprint this routine, please indicate the author.
* Author: Liu * email:liuzuochen@gmail.com * * Package liuzuochen.sample.upload;
Import Org.apache.commons.fileupload.ProgressListener;
Import Javax.servlet.http.HttpServletRequest;
	public class Fileuploadlistener implements progresslistener{private HttpServletRequest request=null;
	Public Fileuploadlistener (HttpServletRequest request) {this.request=request;  /** * Update status/public void update (long pbytesread, long pcontentlength, int pitems) {fileuploadstatus statusbean=
		Backgroundservice.getstatusbean (Request);
		Statusbean.setuploadtotalsize (pcontentlength);
	    Read completion if (pcontentlength = = 1) {statusbean.setstatus ("complete read for + pitems +" file: Read "+ pbytesread +" bytes. ");
	    Statusbean.setreadtotalsize (Pbytesread);
	    Statusbean.setsuccessuploadfilecount (Pitems);
	    Statusbean.setprocessendtime (System.currenttimemillis ()); Statusbean.setprocessrunningtime (statusbean.getprocessendtime());  Read in} else {Statusbean.setstatus ("Currently processing the first" + Pitems + "file: Read already" + Pbytesread +
"/" + pcontentlength+ "bytes."); Statusbean.setreadtotalsize (Pbytesread); Statusbean.setcurrentuploadfilenum (Pitems); Statusbean.setprocessrunningtime (System.currenttimemillis ()); } backgroundservice.savestatusbean (Request,statusbean); } }
Current 1/2 page 12 Next read the full text
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.