jquery-uploadify 上傳

標籤：des   style   blog   http   java   os   io   檔案   

先從官網下載外掛程式 http://www.uploadify.com/

引入之後。。。。

 

html....................

<!-- 上傳 -->
<div id="certificate_importExcel" class="easyui-dialog" style="width:450px;height:220px;padding:0px 20px;"
closed="true" >
<div style="margin-top:20px;">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a href="javascript:importExcelFile()">上傳檔案</a> | <a href="javascript:$(‘#file_upload‘).uploadify(‘stop‘)">停止上傳!</a>
</div>
</div>

 

js...........

<script type="text/javascript">
$(document).ready(function(){　

$(‘#file_upload‘).uploadify({
‘progressData‘ : ‘speed‘,
‘swf‘ : ‘<%=basePath%>/static/uploadify/uploadify.swf‘,
‘uploader‘ : ‘<%=path%>/cacertificate/importExcel.do‘,
‘buttonText‘ : ‘選擇檔案‘,
‘fileTypeExts‘ : ‘*.xls‘,
‘auto‘:false,
‘fileObjName‘ : ‘file‘,
‘fileTypeDesc‘ : ‘excel檔案‘,
‘onError‘ :function(){
$.messager.alert("確認","匯入失敗,請與管理員聯絡！");
$.messager.progress(‘close‘);
},
‘onUploadSuccess‘ : function(file, data, response) {
if(data=="null"){
$.messager.alert("確認","未上傳excel！");
}else if(data=="excel"){
$.messager.alert("確認","本匯入只支援excel檔案匯入！");
}else if(data=="title"){
$.messager.alert("確認","excel檔案格式不正確！");
}else if(data=="sucess"){
$.messager.alert("確認","匯入成功！");
$(‘#certificate_info‘).datagrid(‘reload‘);
}
$.messager.progress(‘close‘);
}

});

 

$("#certificate_info").querygrid({
url:‘tificate/query.do‘,
remoteSort: false,
//idField:‘c_checkid‘,
custom:true,
iconCls:‘icon-save‘,
nowrap:true,
striped:true,
collapsible:true,
pagination:true,
rownumbers:true,
fitColumns:true,
fit:true,
pageSize:15,
pageList:[15,20,30,100],
onLoadError:function(data){
$.messager.alert("載入提示",data.responseText);
},
frozenColumns:[[
{field:‘ck‘,checkbox:true}
]],
columns:[[
{field:‘c_id‘,title:‘序號‘,align:‘center‘},
{field:‘c_note‘,title:‘備忘‘,align:‘center‘}
]],
toolbar:[${current_ajaxclient_authority}]
 toolbar:[{

id:‘btncexp‘,
text:‘匯入‘,
iconCls:‘icon-search‘,
handler:function(){
$("#certificate_importExcel").dialog(‘open‘).dialog(‘setTitle‘,‘上傳‘);

}
}] 
});

});
</script>

 

這樣，點擊匯入按鈕之後，通過$("#certificate_importExcel").dialog(‘open‘).dialog(‘setTitle‘,‘上傳‘);

就會顯示如下：

擴充：手動加遮罩層

function importExcelFile(){
var state=200;
var obj=$(‘#file_upload‘).data(‘uploadify‘).queueData.files;//擷取選擇的檔案
for(var s in obj){
state=250;
}

if(state==250){
$.messager.progress({
title:‘提示‘,
msg:‘請稍等...‘,
interval:500,
text:‘正在匯入‘
});

$(‘#file_upload‘).uploadify(‘upload‘, ‘*‘);//手動上傳
}else{
$.messager.alert("確認","請選擇一個excel！");
}
}