uplodify 上传插件与My97时间插件综合应用（时间判断，表单button提交）

本文链接：https://blog.youkuaiyun.com/Lenux2017/article/details/77870255

该博客展示了如何在HTML表单中结合使用uploadify文件上传插件和My97时间插件进行日期判断，确保用户不能选择未来日期。在表单提交时，会进行时间验证，只有当日期正确时才能提交到后台。同时，通过uploadify实现了图片上传并实时预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- js -->
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

<!-- my97 -->
<script type="text/javascript" src="js/My97/My97DatePicker/WdatePicker.js"></script>

<!-- uploadify -->
<script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css" />


</head>
<body>
	<form name="form1" method="post">
		公司名称：<input type="text" name="cname"><br>
		创始人：<input type="text" name="cboss"><br>
		LOGO：<div id="show_file"></div>
				<img id="show_img" width="100" height="100"/>
				<input type="file" id="uploadImg" name="imgPath"/>
				<input type="hidden" name='imgStr' size="100"/>
	
		成立日期：<input  class="Wdate"  type="text" id="tt" name="ctime" onClick="WdatePicker()"><br>
		提交<input type="button" value="提交" id="bt1">
	          <input type="reset">
	</form>
	
<!-- 	=============================================================== -->
<script type="text/javascript">
// 		判断日期===============================================================
		//定义全局变量，用来提交表单时，作总的验证
		var flag1=false;
		
		$("#tt").blur(function(){
			//点击时间插件框，onblur时间出发方法，取选择的String值，这里$("#").val()取不到，用dom方法
			var timeValue=document.getElementById("tt").value;
			//String转毫秒数
			ttDate=Date.parse(timeValue);
			//取当前时间
			var today=new Date();
			//取当前毫秒数
			todaySec=today.getTime();
			//比较时间，符合规则则赋值为true
			if (ttDate<todaySec) {
				flag1=true;
			}
			
		})
		
		//submit按钮改为button，并定义提交路径
		//满足flag条件，跳转。注意：此时虽然不在form里写action路径，但是提交方式必须为post█████████
		//否则提交后中文乱码！
		$("#bt1").click(function(){
			if (flag1==true) {
				document.form1.action="companyAction_add.action";
				document.form1.submit();
			}else {
				alert("不能选择未来时间")
			}
		})
// ===============================================================


		$("#uploadImg").uploadify({
			//插件自带  不可忽略的参数flash插件
			'swf': '<%=request.getContextPath()%>/js/uploadify/uploadify.swf',
			//前台请求后台的url 不可忽略的参数 ******
			'uploader': '<%=request.getContextPath()%>/companyAction_upIMG.action',
			//给div的进度条加背景 不可忽略******
			'queueID': 'show_file',
			//上传文件文件名 跟file标签 name值 保持一致██████████████████
			'fileObjName' : 'imgPath',
			//给上传按钮设置文字
			'buttonText': '上传',
			//设置文件是否自动上传
			'auto': true,
			//可以同时选择多个文件 默认为true  不可忽略
			'multi': true,
			//上传后队列是否消失
			'removeCompleted': true,
			//队列消失时间
			'removeTimeout' : 1,
			//上传文件的个数，项目中一共可以上传文件的个数
			'uploadLimit':  -1,
			//上传文件的类型
			'fileTypeExts': '*.*',
			//成功回调函数 file：文件对象。data后台输出数据
			'onUploadSuccess':function(file,data,response){
				//data = eval("("+data+")");
				//alert(file.name+" 路径："+data.realPath)
				//图片回显， 预览
				$("#show_img").attr("src","<%=request.getContextPath()%>/newFile/"+data)
				// 文本框 回填
				$("[name='imgStr']").val(data);
			}
			
		});
</script>
</body>
</html>