JavaScript uses uploadify to implement multiple file upload _javascript tips

Use uploadify to realize file upload can client judge file size, control file upload type, achieve multiple file upload, display progress bar and other functions, easy to use, good compatibility.

This example is the integration of DWZ uploadify function extracted, can be used alone, not necessarily to be used in DWZ, this example is only for testing, so use static page to test:

Not much to say, code to respect:

Code for 2,html pages

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  

3, uploaded servlet code

Package uploadfile; 
Import Java.io.File; 
Import java.io.IOException; 
Import Java.util.Iterator; 
 
Import java.util.List; 
Import javax.servlet.ServletException; 
Import Javax.servlet.http.HttpServlet; 
Import Javax.servlet.http.HttpServletRequest; 
 
Import Javax.servlet.http.HttpServletResponse; 
Import Org.apache.commons.fileupload.FileItem; 
Import org.apache.commons.fileupload.FileUploadException; 
Import Org.apache.commons.fileupload.disk.DiskFileItemFactory; 
 
Import Org.apache.commons.fileupload.servlet.ServletFileUpload; public class UploadFile extends HttpServlet {@Override protected void service (HttpServletRequest request, Httpser 
  Vletresponse response) throws Servletexception, IOException {super.service (request, response); @Override protected void DoPost (HttpServletRequest req, HttpServletResponse resp) throws Servletexc Eption, IOException {//Temp directory String BasePath = Req.getservletcontext (). Getrealpath ("Upload"); 
     
    String tempdir = "temp"; 
    File Tempfile = new file (BasePath + file.separator +tempdir); 
    if (!tempfile.exists ()) {Tempfile.mkdir (); 
    } diskfileitemfactory DFC = new Diskfileitemfactory (); Dfc.setsizethreshold (1*1024*1024)//Set critical value dfc.setrepository (tempfile);//Set temporary upload directory servletfileupload upload 
    = new Servletfileupload (DFC); 
    Upload.setheaderencoding ("UTF-8");//Set the maximum value of the encoding//setting file, set the 5mb,5*1024*1024 here; 
     
    Upload.setsizemax (5 * 1024 * 1024); 
      try {List filelist = upload.parserequest (req); 
      Iterator<fileitem> iterator = Filelist.iterator (); 
        while (Iterator.hasnext ()) {Fileitem item = Iterator.next (); 
        String filename = item.getname ();//get filename if (filename!= null) {//system.out.println (filename); 
        System.out.println (Item.getsize ()); 
        File SourceFile = new file (basepath+file.separator+filename); 
  Item.write (sourcefile);      A catch (Fileuploadexception e) {e.printstacktrace ()); 
    catch (Exception e) {e.printstacktrace (); //resp.getwriter (). Print ("Upload success!").  
  "); @Override protected void doget (HttpServletRequest req, HttpServletResponse resp) throws Servletexce 
  Ption, IOException {super.dopost (req, resp); 
 } 
}

4,web.xml Configuration

<servlet> 
 <servlet-name>upLoadify</servlet-name> 
 <servlet-class> uploadfile.uploadfile</servlet-class> 
</servlet> 
<servlet-mapping> 
 < Servlet-name>uploadify</servlet-name> 
 <url-pattern>/servlet/uploadify.do</url-pattern > 
</servlet-mapping> 

5,uploadify of the message is in English, in order to display the Chinese message, the error prompted the method to reset, new Errorcode.js placed under the Resource/dwz/uploadify/scripts folder, And on the page to import this JS,JS code as follows:

var uploadify_onselecterror = function (file, errorcode, errormsg) {var msgtext = "Upload failed \ n"; Switch (errorcode) {case Swfupload.queue_error. 
        queue_limit_exceeded://this.queuedata.errormsg = "Upload every time" + This.settings.queueSizeLimit + "files"; 
        Msgtext + + "upload" + this.settings.queueSizeLimit + "file" every time; 
      Break Case Swfupload.queue_error. 
        File_exceeds_size_limit:msgtext + = "File size exceeds the limit (" + This.settings.fileSizeLimit + ")"; 
      Break Case Swfupload.queue_error. 
        Zero_byte_file:msgtext + = "File size is 0"; 
      Break Case Swfupload.queue_error. 
        Invalid_filetype:msgtext + = "file format is not correct, limited only" + this.settings.fileTypeExts; 
      Break 
    Default:msgtext + = "Error code:" + errorcode + "\ n" + errormsg; 
  alert (Msgtext); 
  
}; var uploadify_onuploaderror = function (file, errorcode, ErrorMsg, errorstring) {//manual cancel does not eject the prompt if (errorcode = S Wfupload.upload_error. 
File_cancelled        || ErrorCode = = Swfupload.upload_error. 
    upload_stopped) {return; 
    var msgtext = "Upload failed \ n"; Switch (errorcode) {case Swfupload.upload_error. 
        Http_error:msgtext + = "HTTP error \ n" + errormsg; 
      Break Case Swfupload.upload_error. 
        Missing_upload_url:msgtext + + "Upload file lost, please upload"; 
      Break Case Swfupload.upload_error. 
        Io_error:msgtext + = "IO error"; 
      Break Case Swfupload.upload_error. 
        Security_error:msgtext + = "Security error \ n" + errormsg; 
      Break Case Swfupload.upload_error. 
        Upload_limit_exceeded:msgtext + + "upload" + This.settings.uploadLimit + "one" every time; 
      Break Case Swfupload.upload_error. 
        Upload_failed:msgtext + = errormsg; 
      Break Case Swfupload.upload_error. 
        Specified_file_id_not_found:msgtext + = "Can not find the specified file, please re-operation"; 
      Break Case Swfupload.upload_error. 
      File_validation_failed:msgtext = = "parameter Error";  Break  
    Default:msgtext + = "File:" + file.name + "\ n error code:" + errorcode + "\ n" + errormsg + "\ n" + errorstring; 
  alert (Msgtext); 
}//return parameters; 
var uploadify_onuploadsuccess = function (file, data, response) {alert (file.name + "\ n \ nthe upload succeeded"); 
 };

Wrap

Original link: http://blog.csdn.net/hwt_211/article/details/36888763

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.