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 screen9 {
    #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）。