form表单提交后，自定义页面跳转或者提示内容
js请求代码和html代码是我在网上找的，但是后来想再去寻找时，已经找不见了。所以写此博客来记录。
不会解释，一切看代码。
《HTML》代码：
<div class="three-line-power-view"> <!-- 上传示意图表单 --> <form id="power-view-file-form" enctype="multipart/form-data" action="aaa" method="post" target="rfFrame"> <input type="file" class="power-view-file-image" name="file" /> <input type="submit" class="power-view-file-submit" style="cursor: pointer;width:64px;" value="提交" /> <!-- 图片上传展示区域 --> <div class="three-line-power-view-file"> </div> </form> <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe> </div>form设置target属性，引用的是下方 <iframe>的id，具体什么原因，我也不清楚。
若上传图片预览效果
$(function() {
$('[type=file]').change(function(e) {
var file = e.target.files[0];
preview1(file);
});
});
// 预览图片
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file);
var $img = $(img);
img.onload = function() {
URL.revokeObjectURL(url);
$('.three-line-power-view-file').empty().append($img);
}
}
function preview2(file) {
var reader = new FileReader();
reader.onload = function(e) {
var $img = $('<img>').attr("src", e.target.result);
$('.three-line-power-view-file').empty().append($img);
}
reader.readAsDataURL(file);
}
两个预览图片的方法，都可以。
js请求
// 点击提交，阻止form表单提交
$(".power-view-file-submit").click(function(){
var options = {
url : 'aaa', // 请求路径，同form的action
type : 'post',
beforeSend : function(xhr){//请求之前
var index = layer.load(1, {
shade: [0.5,'#000'] //0.5透明度的黑色背景
});
},
success : function(result) {
// 上传成功想要做的事情
},
complete : function(result){//请求完成
//询问框
layer.confirm('广告主修改成功！页面将跳转到列表页。', {
btn: ['确定'] //按钮
},
function(){
window.location.href = "www.baidu.com";// 完成后页面跳转
});
} ,
error : function(xhr, status, msg) {
alert("状态码 "+status+"; "+msg)
layer.msg('玩命加载中..');
}
};
$("#power-view-file-form").ajaxSubmit(options);
complete和error方法可省略，一切的判断只需在success方法即可。
Controller控制器，上传
@ResponseBody @RequestMapping(value = "aaa", method = { RequestMethod.POST }) public Map<String, Object> aaa(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request) { Map<String, Object> map = new HashMap<String, Object>(); Map<String, Object> retMap = new HashMap<String, Object>(); Boolean boo = true; try { if (file.isEmpty()) { boo = false; map = StringUtil.retParam(boo, "请选择图片", retMap); } else { // 1.获取新文件名 // 获取原始文件名 String originalFileName = file.getOriginalFilename(); // 获取文件扩展名 String suffix = FilenameUtils.getExtension(originalFileName); if (!(suffix.equals("jpg") || suffix.equals("bmp") || suffix.equals("gif") || suffix.equals("png"))) { boo = false; map = StringUtil.retParam(boo, "请选择正确格式的文件", retMap); } else { // 构造新的文件名 String newFileName = System.currentTimeMillis() + "." + suffix; // 2.判断创建上传的目录是否存在，不存在则新增文件夹 File uploadDir = new File(request.getSession().getServletContext().getRealPath("/img")); if (!uploadDir.exists() || !uploadDir.isDirectory()) { uploadDir.mkdirs(); } // 3.复制文件流到上传目录下的新文件 File uploadFile = new File(uploadDir.getAbsolutePath() + "/" + newFileName); InputStream inputStream = file.getInputStream(); OutputStream outputStream = new FileOutputStream(uploadFile); IOUtils.copy(inputStream, outputStream); // 关闭流 IOUtils.closeQuietly(inputStream); IOUtils.closeQuietly(outputStream); String fileUrl = request.getContextPath() + "/img/" + newFileName; retMap.put("fileUrl", fileUrl); map = StringUtil.retParam(boo, "图片上传成功", retMap); } } } catch (Exception e) { boo = false; map = StringUtil.retParam(boo, "服务器异常", retMap); } return map; }
关于上传下载代码，网上很多。我这里只需要上传即可。
以上就是js控制form表单提交后页面跳转的内容了。
如果你复制代码运行，你会发现有错，那是因为还需要下载一个插件jQuery-form.js，我已经找不到那个下载路径，所以这里就不提供下载了。