您的位置：首页 > 其它

文件上传－uploadify控件的使用

2017-02-28 13:56 253 查看

文件的上传是我们在项目开发中常见的功能，网上也会搜到很多相关的控件，下面对常用的文件上传控件 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>



<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" onclick="onCancel()">&l
4000
t;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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 控件 api

相关文章推荐

新的分享

章节导航