form表单上传文件前校验,提交后不跳转界面

时间:2025-03-27 07:43:45

这几天写前端界面时用到了表单,遇到的问题总结下:

表单上传文件,验证输入:

<form style="display:none" name="uploadForm" method="POST" style="margin-left:10%;" class="uploadFileFormClass" enctype="multipart/form-data" 
action=${}/apkbuilding/demos/uploadPlatfomDemo> 
<span style="float:left">上传当前渠道已对接模板: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span  style="float:left">请选择要上传的文件:</span> 
<input type="file" style="float:left;"  name="formFile" size="30" />
  <span  style="float:left"> 请输入版本号: </span> 
  <input type="text" style="float:left;" name="formVersionCode" />
<input type="submit" style="float:left;" name="submit" value="上传demo" class="js_submit">  
<input type="hidden" name = "formPlatformId" class="formHiddenPlatformId" />
</form>

action即是上传的地址

想在上传之前进行校验是否输入了参数。

//form提交前,验证
$("#uploadFileForm").submit(function(e){
if(!$("#formFileId").val()||!$("#formVersionCodeId").val()){
alert("请输入版本号,并选择要上传的apk。");
return false;
}
});

2.提交后不跳转界面

提交后每次都会跳转到一个新的页面,去显示了服务器端返回的json数据。

因为服务器端也是自己在写就改了一下这个接口的返回数据


return "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/></head><body οnlοad='javascript:()'></body></html>";

这样在获取服务器端数据后,浏览器进行解析,解析后,又跳转回去了。

然后在页面又判断是否有数据,有数据就重新加载了一遍

//初始化时加载
if($("#js_select_platform_name").val()!=""){
setTimeout(function () { 
$("#btnSearch").click();
}, 1000);
}

未加延时时,数据加载的总是旧数据,加个延时1秒问题解决。


后来又需要弹出对话框,加上对话框。
return "<html><head></head><body οnlοad='alert(\"上传失败!\");javascript:()'></body></html>";

中文乱码。

接口注解上加上编码问题解决

@RequestMapping(value="/uploadPlatfomDemo", produces={"text/html;charset=UTF-8"})