Ajax上传文件

先上效果图

基于EazyUI开发

目前的单文件上传，还是伪进度条的，
至于做成真正动态的进度条 需要ajax去后台获取文件大小跟总大小，
考虑目前项目文件都是10MB以下 所以就用了个伪进度条

上代码

html

<form id="fileload" action="/ProcessDeployment/upload"  target="fileupload" enctype="multipart/form-data" method="post">
	<table style="line-height: 30px; width:420px; margin:0px auto;">
		<tr>
			<td style="text-align: right;">流程名称：</td>
			<td><input id="txtProcessName" name="txtProcessName" class="easyui-textbox"
				style="width:300px;" /></td>
		</tr>
		<tr>
			<td style="text-align: right;">流程文件：</td>
			<td><input id="txtFile" name="txtFile" data-options="buttonText: '选择zip文件'"
				class="easyui-filebox" style="width:300px;" /></td>
		</tr>
	</table>
</form>
<iframe style="display:none" name="fileupload"></iframe>
<div
	style="text-align:center; line-height:50px; width:420px; margin:0px auto;">
	<button id="btnSave" class="easyui-linkbutton"
		data-options="iconCls:'icon-save'" style="width:70px;">保存</button>
	<button id="btnCancel" class="easyui-linkbutton"
		data-options="iconCls:'icon-cancel'" style="width:70px;">取消</button>
</div>

js

<p>try {
debugger;
$(function() {
$("#btnCancel").bind("click",function() {
$('#win').window('close');
});</p><p>$("#btnSave").bind("click",function() {
debugger;
var processName = $("#txtProcessName").textbox("getValue");
if (processName == "") {
$.messager.alert('系统消息','请填写流程名称。','info');
return;
}
var filebox = $("#txtFile").filebox("getValue");
if (filebox == "") {
$.messager.alert('系统消息','请选择流程文件。','info');
return;
} else {
if (filebox.toLowerCase().lastIndexOf(".zip") < 0) {
$.messager.alert('系统消息','请选择zip格式的文件。','info');
return;
}
}
$.messager.confirm('系统消息','您确定保存吗？',function(r) {
if (r) {
$.messager.progress({
title : '系统消息',msg : '文件上传中...'
});
setTimeout(function() {
$("#fileload").submit();
var t = setInterval(function(){
$.post("/ProcessDeployment/cheackLoad",{flag:new Date().getTime()},function(data){
if(data.Result==true)
{
clearInterval(t);
$.messager.progress('close');
$.messager.alert('系统消息','文件上传成功。','info');
$('#win').window('close');
$('#dg').datagrid('reload'); 
}

        if(data.Result==false){
clearInterval(t);
$.messager.alert('系统消息','文件上传失败。','info');
}
});

},1000);
},1000);
}
});
});
});</p><p>} catch (e) {</p><p>}
</p>

后台使用的是Jfinal

Controller

public void uploadindex()
{
setSessionAttr(GlobalKey.FileIsLoaded,"");
render("upload.jsp");
}
public void cheackLoad()
{
Map<String,Object> map=new HashMap<String,Object>();
map.put("Result",getSessionAttr(GlobalKey.FileIsLoaded));
renderJson(JsonKit.toJson(map));
}

public void upload()
{
UploadFile file=null;
InputStream in=null;
ZipInputStream zipInputStream=null;
try {
//保存文件
file = getFile("txtFile");
String processName = getPara("txtProcessName");
in = new FileInputStream(file.getFile());
//InputStream in=this.getClass().getClassLoader().getResourceAsStream("diagrams/"+file.getFile().getName());
zipInputStream=new ZipInputStream(in);

Deployment deployment= processEngines.getRepositoryService().createDeployment().name(processName).addZipInputStream(zipInputStream).deploy();
//----------------------------
System.out.println("部署ID："+deployment.getId());
System.out.println("部署名称:"+deployment.getName());
//----------------------------
zipInputStream.close();
in.close();
//代表部署成功，那么就删掉这个文件
file.getFile().delete();
setSessionAttr(GlobalKey.FileIsLoaded,true);
} catch (Exception e) {
if(zipInputStream!=null)
{
try {
zipInputStream.close();
} catch (IOException e1) {
}
}
if(in!=null)
{
try {
in.close();
} catch (IOException e1) {
}
}
if(file!=null){
file.getFile().delete();
}
setSessionAttr(GlobalKey.FileIsLoaded,false);
}
}

文件保存地址的配置

JfinalCfg.java类里面

public void configConstant(Constants me) {
		// TODO Auto-generated method stub
		// 加载少量必要配置，随后可用getProperty(...)获取值
		loadPropertyFile("config.properties");
		// 设置配置文件的开发模式
		me.setDevMode(getPropertyToBoolean("devMode",false));
		// 设置页面开发类型
		me.setViewType(ViewType.JSP);
		// 默认view的位置
		me.setBaseViewPath("/View");
		// 地址栏参数模式
		me.setUrlParaSeparator("-");
		//文件上传的存放地址,在webRoot下的WEB-INF/classes/diagrams文件夹
		me.setUploadedFileSaveDirectory(PathKit.getWebRootPath()+"/WEB-INF/classes/diagrams");
	}

最后上传成功之后的文件

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!