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

$("#btnSave").bind("click", function() {
			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();
						$.messager.progress('close');
						$.messager.alert('系统消息', '文件上传成功。', 'info');
						$('#win').window('close');
					}, 1000);
				}
			});
		});

 后台使用的是Jfinal

Controller

public void upload()
		{
			//ProcessEngine processEngines = ProcessEngines.getDefaultProcessEngine();
			//保存文件
			UploadFile file = getFile("txtFile");
			
			String processName = getPara("txtProcessName");
			System.out.println("xxxx:"+processName);
			System.out.println("22222:"+file.getFile().getName());
		}

文件保存地址的配置

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");
	}

最后上传成功之后的文件

Ajax上传文件

标签：

原文地址：http://blog.csdn.net/qq873113580/article/details/47337601