Artdialog+plupload to realize multi-file upload _javascript skills

Plupload Introduction

Plupload is developed by a TINYMCE developer and provides a highly available upload plugin for your content management system or similar uploading programs. Plupload is currently divided into a core API and a jquery upload queue widget so that you can use it directly or customize it yourself.

One, the effect shows

Include file upload panel and file upload list

Second, introduce

To make a long story short, using spring springmvc mybatis maven MySQL for multiple file uploads, the download uses the form of streaming.

The paging involved I will open another blog introduction.

III. Preparation of materials

Plupload

Artdialog

And a JS file that initializes the plugin.

These can be downloaded directly from my sharing connection.

Link: Http://pan.baidu.com/s/1c27cTAK Password: btqj

and jquery, the download itself.

Four, front code

Introducing Styles and JS files

<link rel= "stylesheet" href= "Resources/css/plupload.css" type= "Text/css" >
<script src= "resources/js/" Jquery.min.js "></script>
<script src=" Resources/upload/plupload.full.min.js "></script>
<script src= "Resources/artdialog4.1.7/artdialog.source.js?skin=blue" ></script>
<script Src= "Resources/js/upload.js" ></script>

JS Code

_plupload (bound uuid, file upload path); ① about the bound UUID, for example, the current user ID is the UUID, and you can relate the user ID to the file you uploaded. Query in the future according to the user ID can query this user uploaded all the files ② This method is encapsulated, in upload.js inside can see, I note written very clearly, can also refer to official documents

$ (function () {
  3   $ (' #uploadBtn '). Click (function () {
   popupdialog ();
  });
  _plupload (' Test ', ' ${pagecontext.request.contextpath}/uploadfile ');
 };

Page code, a button, a pop-up box

<a id= "uploadbtn" class= "optionbtn inline" href= "#" > File upload </a>
 <!--trigger popup--> <div
 " Uploadcontent "style=" display:none; height:300px; Overflow-x: Hidden; Overflow-y: Auto; " >
  <div id= "Choosefile" >
   <span> Single file support less than 100m</span><br/> <a id= "Uploadify" href= "javascript:void (0);" > select Documents </a>
  </div>
  <div id= "Uploadfilequeue" style= border:1px solid #a7c5e2; width:350px; " ></div>
 </div>
 <pre id= "Console" ></pre>

Five, background code

I have not encapsulated into a method, in order to see clearly, you can encapsulate the

/** * File Upload request address * @param request * @param response/@RequestMapping ("UploadFile") public void upload (Http ServletRequest request, HttpServletResponse response) {Multiparthttpservletrequest multipartrequest = ( multiparthttpservletrequest) request;//binary upload commonsmultipartfile file = (commonsmultipartfile)  Multipartrequest.getfile ("file");/get file String Unid = Uuid.randomuuid (). toString (). Replace ("-", "");/* File primary key/String OriginalFilename = File.getoriginalfilename ();/* original filename, including suffix/String fliesize = string.valueof (File.getsize ()); * File size */String Path = null;/* file storage Path/String Punid = Request.getparameter ("Punid"); /* Associated File Punid *//Save file if (!= null) {try {String basepath = Request.getsession (). Getservletcontext (). GE
    Trealpath ("/uploadfile");
    SimpleDateFormat SDF = new SimpleDateFormat ("/yyyy/mm/dd/");
    String subpath = Sdf.format (New Date ());
    Path = BasePath + subpath + Unid + file.separator + originalfilename; If the folderDoes not exist, create the folder file Dir = new file (path);
    if (!dir.exists ()) {dir.mkdirs ();
   } file.transferto (dir);
   catch (Exception e) {e.printstacktrace ();
  }//File size conversion long KB = 1024;
  Long MB = KB * 1024;
  Long GB = MB * 1024;
  Long size = Long.parselong (fliesize);
  if (size >= GB) {fliesize = String.Format ("%.1f GB", (float) SIZE/GB);
   else if (size >= MB) {float F = (float) size/mb; Fliesize = String.Format (F > 100?)
  "%.0f MB": "%.1f MB", f);
   else if (size >= kb) {float F = (float) size/kb; Fliesize = String.Format (F > 100?)
  "%.0f KB": "%.1f KB", f);
  else {fliesize = String.Format ("%d B", size);
  ///storage file information into database fileupload fileupload = new FileUpload ();
  Fileupload.setunid (Unid);
  Fileupload.setoriginalfilename (OriginalFilename);
  Fileupload.setfliesize (fliesize);
  Fileupload.setpath (path);
  Fileupload.setpunid (Punid);
  SimpleDateFormat df = new SimpleDateFormat ("Yyyy-mm-dd HH:mm:ss");Fileupload.setflietime (New Date ()) (Df.format);
 Fileuploadservice.insert (FileUpload); }

  Here comes with a download method that is downloaded using a file stream, based on the file ID

@RequestMapping ("DownloadFile") public void DownloadFile (HttpServletRequest request, httpservletresponse response) {S
  Tring Unid = Request.getparameter ("Unid");
  FileUpload fileupload = Fileuploadservice.selectbyprimarykey (Unid); if (fileupload!= null) {try {string filename = new String (Fileupload.getoriginalfilename (). GetBytes ("GBK"), "ISO
    -8859-1 ");
    String path = Fileupload.getpath ();
    Response.setcharacterencoding ("Utf-8");
    Response.setcontenttype ("Application/octet-stream");
    Response.setheader ("Content-disposition", "attachment;filename=" + fileName);
     Response.setheader ("Content-length", Fileupload.getfliesize ());
     InputStream InputStream = new FileInputStream (new File (path));
     OutputStream OS = Response.getoutputstream ();
     Byte[] B = new byte[2048];
     int length;
     while (length = Inputstream.read (b)) > 0) {os.write (b, 0, length);
     } os.close ();
   Inputstream.close (); catch (FileNotFoundExceptione) {e.printstacktrace ();
   catch (IOException e) {e.printstacktrace (); }
  }
 }

There is also a deletion method

/** *
  File deletion
  * 
  @param request
  * @param response
 /@ResponseBody @RequestMapping (" Delfile ") public
 map<string, object> delfile (httpservletrequest request, httpservletresponse response) {
  String Unid = Request.getparameter ("Unid");
  FileUpload fileupload = Fileuploadservice.selectbyprimarykey (Unid);
  Deletes local
  Boolean flag = false;
  File File = new file (Fileupload.getpath ());
  if (file.exists ()) {//path is a file and is not NULL to delete
   flag = File.delete ();
  }
  Delete database
  int result = Fileuploadservice.deletebyprimarykey (Unid);
  if (Result > 0) {
   flag = true;
  }
  map<string, object> map = new hashmap<string, object> ();
  Map.put ("result", flag);
  return map;
 }

The above is a small series to introduce artdialog+plupload to achieve multiple file upload, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!