jQuery FileUpload等插件的使用實例

1、jQuery FileUpload

需要的js：

jquery.js 

jquery.fileupload.js

jquery.iframe-transport.js

jquery.xdr-transport.js

 

html:

<div id="divAdd" title="添加"><div>+</div><input id="fileUpload" type="file" /></div>

CSS:

/*
 * 選擇文件按鈕樣式
 */
#fileUpload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    direction: ltr;
    cursor: pointer;    
    width:100px; 
    height:100px; 
}        
/* Fixes for IE < 8 */
@media screen\9 {
    #fileUpload {
        filter: alpha(opacity=0);
    }
}

/*
 * 其他樣式
 */
#divAdd
{
    border:1px solid #ccc;    
    width:99px; 
    height:99px; 
    text-align:center; 
    font-size:40px;    
    margin:17px 5px 10px 5px;
    cursor: pointer;
    position: relative;
    overflow:hidden;
}
#divAdd div
{
    margin-top:18%;        
}

js初始化：

  function initUploadDlg()
  {        
      $("#fileUpload").fileupload({
          url: "/WealthManagement/WFC/FileUpload.aspx",
          dataType: 'json',
          add: function (e, data) {
              var fileName = data.files[0].name;           
              var fileType = fileName.substr(fileName.lastIndexOf(".") + 1);
                            // 可以通過data.files[0].size獲取文件大小
              
              $.blockUI({
                  message: $("#downloadMsg")
              });
              title = fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.lastIndexOf('.'));
              $("#fileUpload").fileupload(
                  'option',
                  'formData',
                  {'title': title, 'validDate': '', 'windcode': pageBaseInfo.Windcode} 
              ); // 傳參不能放在初始化語句中，否則只能傳遞參數的初始化值
              data.submit();            
          },
          progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
              $("#downloadMsg").html('已上傳' + progress + '%');
              if(progress == '100')
              {
                  $("#downloadMsg").html('處理中...');
              }
          },
          done: function (e, data) {
              var res = data.result.Response;
              if(res && res.Status == 0)
              {
                  //  更新文件列表
                  updateFundFiles();                                 
              }
              else
              {
                  alert(res ? res.Message : "上傳失敗，請重試！");
              }
              $.unblockUI();  
          }
      });

 

后台代碼（HttpHandler.cs）

    public class FileUploadHandler : IHttpHandler
    {
        public override void ProcessRequest(HttpContext context)
        {
            FileUploadResponse res = new FileUploadResponse();
    
            try
            {
                // 獲取文件流
                HttpFileCollection files = context.Request.Files;
                if (files.Count > 0)
                {
                    // 獲取相關參數的方法
                    string title = context.Request["title"];
                    string validDate = context.Request["validDate"];
                    string windcode = context.Request["windcode"] ;
    
                    string path = FundIntroductionBiz.tempFilePath;
                    if (!Directory.Exists(path))
                    {
                        Directory.CreateDirectory(path);
                    }
                    string fileName = windcode + "_" + DateTime.Now.ToString("yyyyMMddHHmmss") + System.IO.Path.GetExtension(files[0].FileName);
                    string fullPath = path + fileName;
                    files[0].SaveAs(fullPath);
    
                    res.Response.Status = 0;
                    res.Response.Message = "上傳成功！";
                }
            }
            catch (Exception ex)
            {
                res.Response.Status = 2;
                res.Response.Message = ex.Message;
            }
    
            context.Response.Write(JsonHelper.ToJson(res));
            context.Response.End();
        }
    }
    
    /// <summary>
    /// 文件上傳響應實體類
    /// </summary>
    public class FileUploadResponse
    {
        public FileUploadEntity Response { get; set; }
    
        public FileUploadResponse()
        {
            Response = new FileUploadEntity();
        }
    
        /// <summary>
        /// 返回信息實體類
        /// </summary>
        public class FileUploadEntity
        {
            /// <summary>
            /// 0:上傳成功，1：上傳失敗, 2:程序異常
            /// </summary>
            public int Status { get; set; }
    
            /// <summary>
            /// 詳細信息
            /// </summary>
            public string Message { get; set; }
        }
    }

注：上傳按鈕的樣式采用的方式為，將input定位在所需按鈕之上，並設為透明。

詳細參數jQuery-File-Upload Options

2、Dialog

文件刪除對話框實例：

<div id="fileAlert" class="dialog" title="<div class='ui-dialog-main'><img src='../resource/images/FundIntroduction/main.jpg' /></div><div class='ui-titlebar-title'>文件刪除</div>">
   <div style="margin:15px 20px;">確定刪除文件“<span>華安物聯網主題基金</span>”？</div>
   <div style="height:30px;">
       <div style="float:left; margin-left:15px;"><input type="button" value="確定" onclick="deleteFileAlert(1)" /></div>
       <div style="float:right; margin-right:15px;"><input type="button" value="取消" onclick="deleteFileAlert(0)" /></div>
   </div>
</div>

初始化：

function initDeleteDlg()
{
     $("#fileAlert").dialog({
         resizable: false,
         height: 120,
         autoOpen: false,
         modal: true
     });
 }

注：可以通過title屬性定制dialog的標題欄

詳細參數jQueryUi Dialog

3、Datepicker

選擇某一日期的實例：

 

    $("#validDate").datepicker({
        dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
        monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        showMonthAfterYear: true,
        dateFormat: 'yy-mm-dd',
        changeYear: true,
        changeMonth: true,
        minDate: 0,
        prevText: "上月",
        nextText: "下月",
        yearRange: "1991:2035"
    });

 

詳細參數jQuery Datepicker Plugin

 

 

4、BlockUI

 詳細用法參見jQuery BlockUI Plugin

 注：可以對瀏覽器頁面或某一元素添加遮罩，需要注意的是，當多個元素共享同一msg（div）可能會出現問題，解決方法是為每個元素添加單獨的msg（div）。