这几天写前端界面时用到了表单,遇到的问题总结下:
表单上传文件,验证输入:
<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">上传当前渠道已对接模板: </span>
<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"})