文件上传－uploadify控件的使用

最新推荐文章于 2021-02-12 21:57:11 发布

醉过方知酒浓-tiger

最新推荐文章于 2021-02-12 21:57:11 发布

阅读量716

点赞数

分类专栏：常用开发控件文章标签：控件 api

本文链接：https://blog.csdn.net/qq_27937043/article/details/58593895

版权

常用开发控件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文件的上传是我们在项目开发中常见的功能，网上也会搜到很多相关的控件，下面对常用的文件上传控件 uploadify 的使用以案例做简单的介绍，内容如下：

 
 <body> 

 
 <script type="text/javascript" src="<%=request.getContextPath()%>/pollingWarning/ledger/dataimport/swfupload.js"></script> 

 
 <div id="form" class="container"> 

 
 <table width="100%" height="100px;" border="0" cellpadding="0" cellspacing="0" class="Audi-form"> 

 
 <tr> 

 
 <td> 

 
 请选择您要导入的Excel文件: 

 
 </td> 

 
 <td> 

 
 <div style="height:30%;padding-left:0px;margin:0px;"> 

 
 <input id="action" name="action" class="nui-hidden" /> 

 
 <input id="fileFolderId" name="fileFolderId" class="nui-hidden" /> 

 
 <input id=" 
 uploadAttachment 
 " name="uploadAttachment" type="file" /> 

 
 </div> 

 
 </td> 

 
 </tr> 

 
 </table> 

 
 <div class="Audi-tit">导入说明</div> 

 
 <div class="Audi-psd" id="hw_maintenance" style="display:none;"> 

<p>

 
 <b>请点击<a href="javascript:exportExcel()" style="color:blue;font-size:15px;">这里</a>下载excel导入模板。</b><br/> 

 
 <b><font color = "red">a.维保信息填写规则：</font></b><br/> 维保中的注意事项 

 
 <br/> 维保中的某些字段的类型要求！ 

 
 <br/> 维保中的某些字段有非空校验，注意小数点为英文状态下输入！ 

 
 <br/> 

 
 </p> 

 
 <br/> 

 
 <br/> 

 
 </div> 

 
 </div> 

 
 </div> 

 
 <!--导出Excel相关HTML--> 

 
 <form id="excelForm" action="" method="post" target="excelIFrame"> 

 
 <input class="nui-hidden" name="columns" id="columns" /> 

 
 <input class="nui-hidden" name="empcode" id="empcode" /> 

 
 <input class="nui-hidden" name="empname" id="empname" /> 

 
 <input class="nui-hidden" name="beginYear" id="beginYear" /> 

 
 <input class="nui-hidden" name="beginMonth" id="beginMonth" /> 

 
 <input class="nui-hidden" name="endYear" id="endYear" /> 

 
 <input class="nui-hidden" name="endMonth" id="endMonth" /> 

 
 <input class="nui-hidden" name="permission" id="permission" /> 

 
 </form> 

 
 <iframe id="excelIFrame" name="excelIFrame" style="display:none;"></iframe> 

 
 <div class="footer-bar"> 

 
 <div class="Find-data-btn" style="margin-left:39%;"> 

 
 <i class="button-Return" οnclick="onCancel()"><a href="#" title="返回"></a></i> 

 
 </div> 

 
 </div> 

 
 <script type="text/javascript"> 

 
 var retCode = '<b:write property="retCode" />'; 

 
 var maskDiv = new nui.Form("#form"); 

 
 var loadTemplateType = "<%=loadTemplateType %>"; 

 
 $(function() { 

 
 $("# 
 uploadAttachment 
 ").uploadify({ 

 
 'swf': 
  '<%=request.getContextPath()%>/common/uploadify/uploadify.swf',

 
 ' 
 uploader 
 ': '<%=request.getContextPath()%>/pollingWarning/contactLeasetime_import.jsp?loadTemplateType=' + loadTemplateType, 

 
 ' 
 folder 
 ': "uploads", 

 
 ' 
 queueId 
 ': "fileQueue",  

 
 ' 
 queueSizeLimit 
 ': 20,//限制上传文件的数量 

 
 ' 
 auto 
 ': true,//是否自动上传 

 
 ' 
 multi 
 ': false,//是否允许多文件上传  

 
 ' 
 simUploadLimit 
 ': 3,//同时运行上传的进程数量 

 
 ' 
 buttonText 
 ': "导入数据", 

 
 ' 
 width 
 ': 120, //设置上传文件窗口的宽度 

 
 ' 
 height 
 ': 30, //设置上传文件窗口的高度 

 
 ' 
 onSelect 
 ': 
 onSelect 
 , //点击数据导入，选择文件的时候调用的方法 

 
 ' 
 onUploadStart 
 ':  
 onUploadStart 
 , //文件开始上传的时候调用的方法 

 
 ' 
 removeCompleted 
 ': false, 

 
 ' 
 fileExt 
 ':"*.xls;*.xlsx", //根据自己的需要，限制上传文件的类型 

 
 ' 
 fileDesc 
 ':"请选择*.xls或*.xlsx文件", 

 
 ' 
 onUploadSuccess 
 ': 
 onUploadSuccess //文件上传后调用的方法，  

});

});

 
 function  
 onUploadSuccess 
 (file,data,response){ 

 
 var data1=nui.decode(data); 

 
 var returnMsg=data1.returnMsg; 

 
 var code=data1.returnCode; 

 
 if(code=="0"){ 

 
 nui.alert(returnMsg,"系统提示",function(action){ 

 
 CloseWindow("success"); 

});

 
 }else{ 

 
 nui.alert(returnMsg,"系统提示",function(){ 

});

}

}

 
 function  
 onSelect 
 (){ 

 
 var fiName = file.name; 

 
 var len = fiName.length; 

 
 if(len> 4 && fiName.substring(len-4) != ".xls" && fiName.substring(len-5) != ".xlsx" ){  

 
 nui.alert("请选择.xls或.xlsx文件！"); 

 
 $("#uploadAttachment").uploadify('cancel',file.id);//清空队列 

 
 return; 

}

}

 
 function  
 onUploadStart 
 (){ 

 
 var file = $('#uploadAttachment').value; 

 
 try{ 

 
 $("#uploadAttachment").uploadify("upload","*"); 

 
 }catch(e){  

}

}

 
 function onCancel(){ 

 
 CloseWindow("close"); 

}

 
 function CloseWindow(action) { 

 
 if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action); 

 
 else window.close(); 

}

 
 function exportExcel(){ 

 
 document.getElementById("excelIFrame").src = "<%=request.getContextPath() %>/pollingWarning/contactLeasetime_template.jsp?loadTemplateType=" + loadTemplateType ; 

}

 
 </script> 

 
 </body>
 
 想要进一步学习uploadify 的同学可以参考API
 http://www.cnblogs.com/xingmeng/p/4479796.html

醉过方知酒浓-tiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录