JS Form表单提交文件后，自定义跳转或提示

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，我已经找不到那个下载路径，所以这里就不提供下载了。