[JQuery Plugin] jQuery-File-Upload

記錄一下使用jQuery-File-Upload Version 5使用範但



Example:
必要的js檔

<!-- jquery 1.6+ ,ui 1.8+ -->
<script type="text/javascript" src="js/plugins/jquery.core.js"></script>
<script type="text/javascript" src="js/plugins/jquery.uicore.js"></script>
 <!-- multiple upload requirement -->
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme" />
 <link rel="stylesheet" href="js/plugins/multiupload/jquery.fileupload-ui.css" />

 <script src="js/plugins/multiupload/jquery.tmpl.js"></script>
 <script src="js/plugins/multiupload/jquery.fileupload.js"></script>
 <script src="js/plugins/multiupload/jquery.fileupload-ui.js"></script>
 <script src="js/plugins/multiupload/jquery.iframe-transport.js"></script>
 <script src="js/plugins/multiupload/uploader.js"></script>

頁面配置:測試的頁面是用JSP，所以要注意Jquery樣版的語法會和JSP的EL語法產生衝突，請參閱Q2。

<div id="fileupload">
    <form action="/restful/services/helloworld/simpleupload" 
    method="post" enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input id="file" type="file" name="files[]" multiple>
            </label>
            <button type="submit" class="start">Start upload</button>
            <button type="reset" class="cancel">Cancel upload</button>
            <button type="button" class="delete">Delete files</button>
        </div>
    </form>
    <div class="fileupload-content">
        <table class="files"></table>
        <div class="fileupload-progressbar"></div>
    </div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
        <td class="preview"></td>
        <td class="name">${"${name}"}</td>
        <td class="size">${"${sizef}"}</td>
        {{if error}}
            <td class="error" colspan="2">Error:
                {{if error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else}}${"${error}"}
                {{/if}}
            </td>
        {{else}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
        {{/if}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{if error}} ui-state-error{{/if}}">
        {{if error}}
            <td class="name">${"${name}"}</td>
            <td class="error" >Error Message:
                {{if error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
                {{else error === 'emptyResult'}}Empty file upload result:)
                {{/if}}
            </td>
        {{else}}
            <td class="name" colspan="2">Your File ${"${name}"} Uploaded Successfully. </td>
        {{/if}}
    </tr>
</script>  

uploader.js 準備init uploader plugin

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $("#fileupload").fileupload({
     maxNumberOfFiles:5,
     dataType:"json"});
   
    $('#fileupload').bind('fileuploaddone', function (e, data) {
     //data.jqXHR.responseText is response text
     //data.result is JSON array
        if (data.jqXHR.responseText || data.result) {  
            var fu = $('#fileupload').data('fileupload');
            var JSONjQueryObject = (data.jqXHR.responseText) ? jQuery.parseJSON(data.jqXHR.responseText) : data.result;
            fu._renderDownload(JSONjQueryObject)
                .fadeIn(function () {
                    // Fix for IE7 and lower:
                    $(this).show();
                });
        }
    });
   
});

REST Server:接收圖檔，return值為一個JSON Array

@POST
 @Path("/simpleupload")
 @Consumes(MediaType.MULTIPART_FORM_DATA)
 public String simpleUpload(
   //@Context UriInfo ui,
   @Context HttpServletRequest request)
 {
  String fileName = null;
  System.out.println("--HelloWorld simpleUpload--");
  
  String fileRepository = "D:\\RESTServer\\";
  if (ServletFileUpload.isMultipartContent(request)) {

   FileItemFactory factory = new DiskFileItemFactory();
   ServletFileUpload upload = new ServletFileUpload(factory);
   List items = null;
   try {

    items = upload.parseRequest(request);
    System.out.println("items added:" + items.size());
   } catch (FileUploadException e) {
    System.out.println("FileUploadException:" + e.getMessage());
   }
   if (items != null) {
 
    Iterator iter = items.iterator();
    while (iter.hasNext()) {
     FileItem item = iter.next();
     if (!item.isFormField() && item.getSize() > 0) {
      System.out.println("File be found.");
      System.out.println(item.getName());
      fileName = processFileName(item.getName());
      try {
       String savePath = fileRepository + fileName;
       System.out.println("Server Path:" + savePath);
       item.write(new File(savePath));
      } catch (Exception e) {
       e.printStackTrace();
      }
     }else{
      System.out.println("Field be found.");
      System.out.println("Field name:" + item.getFieldName());
      System.out.println(item.getString());
     }
    }

   }else{
    System.out.println("Items are null.");
   }
  }else{
   System.out.println("ServletFileUpload not found.");
  }
  System.out.println("--/HelloWorld simpleUpload--");
  
 
  return "[{\"name\":\"" + fileName +  "\"}]";
 }

其他重要的FAQ~