标签:
/* * 选择文件按钮样式 */ .fileinput-button { position: relative; overflow: hidden; float:left; } .fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: ‘alpha(opacity=0)‘; font-size: 200px; direction: ltr; cursor: pointer; } /* Fixes for IE < 8 */ @media screen\9 { .fileinput-button input { filter: alpha(opacity=0); font-size: 100%; height: 100%; } }
<div id="fileUploadDlg" 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:20px 10px 10px 10px;"> <div class="uploadButton"> <div style="float:left; margin-left:40px;"> <span class="fileinput-button" > <button type="button">选择文件</button> <input id="fileUpload" style="width:100px;" type="file" /> </span> </div> <div style="float:right; margin-right:40px;"><button id="fileSummit" type="button">上传</button></div> </div> <div class="uploadInfo"><div id="filePath" style="float:left; width:60% ; "></div><div id="uploadProgress" style="float:right; width:30%; color:Red;">已上传:0%</div></div> <div class="addInfo">文档标题:<input id="fileTitle" type="text" /> 有效截止日:<input id="endDate" type="text" /></div> <div style="color:Red;">说明:文件类型支持pdf、doc、docx、ppt、pptx,文件必须小于5M </div> </div> </div>
// 初始化上传对话框 function initUploadDlg() { $("#fileUploadDlg").dialog({ resizable: false, autoOpen: false, width:400, modal: true, open: function () { $("#fileSummit").prop("data", ""); $("#filePath").html(""); $("#fileTitle").val(""); $("#uploadProgress").html(‘‘); } }); $("#divAdd").click(function () { $("#fileUploadDlg").dialog("open"); }); $("#endDate").datepicker({ dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], showMonthAfterYear: true, dateFormat: ‘yy-mm-dd‘, changeYear: true, changeMonth: true, minDate: 0, prevText: "上月", nextText: "下月", yearRange: "1991:2035" }); $("#fileUpload").fileupload({ url: "/WealthManagement/WFC/FileUpload.aspx", dataType: ‘json‘, add: function (e, data) { var fileName = data.files[0].name; $("#filePath").html(data.fileInput.context.value); $("#fileTitle").val(fileName.substring(fileName.lastIndexOf(‘\\‘) + 1, fileName.lastIndexOf(‘.‘))); $("#fileSummit").prop("data", data); }, progress: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $("#uploadProgress").html(‘已上传‘ + progress + ‘%‘); if(progress == ‘100‘) { $("#uploadProgress").html(‘处理中...‘); } }, done: function (e, data) { var res = data.result.Response; if(res && res.Status == 0) { $("#uploadProgress").html(‘已完成‘); alert("上传成功!"); $("#fileUploadDlg").dialog("close"); // 更新文件列表 $(‘#form1‘).block(); updateFundFiles(); $(‘#form1‘).unblock(); } else { alert(res ? res.Message : "上传失败,请重试!"); $("#fileUploadDlg").dialog("close"); } } }); $("#fileSummit").click(function () { var data = $("#fileSummit").prop("data"); if(data && data.files.length > 0) { var fileName = data.files[0].name; var fileType = fileName.substr(fileName.lastIndexOf(".") + 1); if(!isSupportedFile(fileType)) { alert("该文件类型不支持!"); return; } if(data.files[0].size > 5*1024*1024) { alert("文件不能大于5M!"); return; } // 提交上传 data.context = $(‘#fileSummit‘).val(‘Uploading...‘); title = $("#fileTitle").val(); validDate = $("#endDate").val(); $("#fileUpload").fileupload( ‘option‘, ‘formData‘, {‘title‘: title,‘validDate‘: validDate, ‘windcode‘: pageBaseInfo.Windcode} ); // 传参不能放在初始化语句中,否则只能传递参数的初始化值 data.submit(); } else { alert("请选择上传文件!"); } }); }
标签:
原文地址:http://www.cnblogs.com/MattCheng/p/4346536.html