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" });
4、BlockUI
详细用法参见jQuery BlockUI Plugin
注:可以对浏览器页面或某一元素添加遮罩,需要注意的是,当多个元素共享同一msg(div)可能会出现问题,解决方法是为每个元素添加单独的msg(div)。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。