问题：

最近在做项目时，遇到上传图片需求，且在不跳转的情况下获取到返回信息

思路：

1.  使用ajax发送异步请求，经多次测试，最终以失败告终

2. iframe 禁止跳转（未尝试）

3. 修改form标签内提交请求逻辑

实现：（思路3）

1. html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>华风创新 - 发布应用</title>
<link rel="icon" href="/static/imgs/littlelogo.png" type="image/x-icon">
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/upload/css/index.css">
</head>
<body>
     <h1 class="banxin" style="margin: 20px auto;font-size: 24px;font-family: '华文行楷';color:rgba(0,0,0,.8);">欢迎上传新应用</h1>
<form id="form" class="fupload banxin" method=post enctype=multipart/form-data>
<input id="FileUpload" type=file name=file>
<!-- <input id="submit" type=submit value=Upload> -->
</form>
<div class="progress banxin">
<div class="wd"><div class="bar"></div ></div>
<div class="percent">0%</div >
</div>
<div id="status"></div>
</body>
</html>
<script src="/static/js/jquery-1.9.1.min.js"></script>
<script src="/static/js/tools.js"></script>
<script src="/static/js/form_post.js"></script>
<script>
$(function() {
TOOLS.render_top()
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
complete: function(xhr) {
// status.html(xhr.responseText);
alert('上传成功')
//window.localStorage.setItem('updata',JSON.stringify(yy))
window.localStorage.setItem('updata',xhr.responseText)
//console.log(typeof(yy))
//console.log(JSON.stringify(yy))
window.location.href = 'https://app.tianqi.cn/update/'
}
});
$('#FileUpload').change(function () {
$('form').submit()
})
// $('#submit').hide()
function file_change() {
// $('#submit').show()
document.getElementById('form').submit()
$('#form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
complete: function(xhr) {
// status.html(xhr.responseText);
alert('上传成功')
//window.localStorage.setItem('updata',JSON.stringify(yy))
window.localStorage.setItem('updata',xhr.responseText)
//console.log(typeof(yy))
//console.log(JSON.stringify(yy))
window.location.href = 'https://app.tianqi.cn/update/'
}
});
}
});
</script>
<script>
// var imgURL = '';
// 表单提交不进行跳转获取返回数据
// $('form').submit(function (event) {
// event.preventDefault();
// var form = $(this);
// if (!form.hasClass('fupload')) {
// //普通表单
// $.ajax({
// type: form.attr('method'),
// url: form.attr('action'),
// data: form.serialize()
// }).success(function () {
 
// }).fail(function (jqXHR, textStatus, errorThrown) {
// //错误信息
// });
// }
// else {
// // mulitipart form,如文件上传类
// var formData = new FormData(this);
// $.ajax({
// type: form.attr('method'),
// url: form.attr('action'),
// data: formData,
// mimeType: "multipart/form-data",
// contentType: false,
// cache: false,
// processData: false
// }).success(function (yy) {
// alert('上传成功')
// console.log(yy)
// //window.localStorage.setItem('updata',JSON.stringify(yy))
// window.localStorage.setItem('updata',yy)
// //console.log(typeof(yy))
// //console.log(JSON.stringify(yy))
// window.location.href = 'https://app.tianqi.cn/update/'
// }).fail(function (jqXHR, textStatus, errorThrown) {
// //错误信息
// });
// };
// });
</script>

2. 其他样式文件此处不做概述。

3. 参考网址：

天津十三运

form表单提交图片禁止跳转的更多相关文章

  1. 【记录】解决前端form表单回车禁止刷新页面

    最近弄前端 有form表单的情况下 按回车会自动刷新当前页面. 现记录解决方案如下: 1.去掉表单 2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行) 3.以上两点都不想使用,那么就还可以在表 ...

  2. SpringMVC中前端Form表单提交后跳转不过去的问题

    今天晚上打算谢谢Spring整合这个内容,写的差不多之后运行 出现了各种问题 逐一排查 首先有一个(MyEclipse10) 一: class path resource [spring-mvc.xm ...

  3. Form提交表单页面不跳转

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  5. select标签 禁止选择但又能通过序列化form表单传值到后台

    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...

  6. 关于form表单提交数据后不跳转页面+ajax接收返回值的处理

    1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...

  7. 通过jquery实现form表单提交后不跳转页面，保留当前页面

    jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...

  8. form 表单用php来跳转页面

    action="submit.php" method="post"  fomr 表单的提交跳转:method =post/get,get密码和用户的可见性,密码 ...

  9. form表单submit按钮提交页面不跳转

    方案一 <html> <body> <form action="" method="post" target="nm_i ...

随机推荐

  1. bootstrap 架构知识点

    .col-md-pull-2 向右相对定位偏移量 .col-md-push-2 向左相对定位偏移量 .pull-left 左浮动 .pull-right 右浮动     改变大小写 通过这几个类可以改 ...

  2. css代码初始化

    @charset "utf-8";/* 页面元素初始化和常用样式定义-start *//*======== 全局 ========*/body, div, dl, dt, dd, ...

  3. ecshop的详细安装步骤

    从网上找个ecshop包,然后下载,解压,解压后的ecshop是不能直接用的,要更改几个目录的权限才能用. ecshop要放在www目录下,这样访问的话就可以直接 http://localhost/e ...

  4. ipython及Python初体验

    阅读目录: Python环境体验 Python编辑器 ipython安装 Python提示符 Python初体验 print和变量 变量操作 内建函数:方法 数学运算:简单算术.随机数 关于模块 一. ...

  5. 模拟对象测试——EasyMock

    一.EasyMock 使用动态代理实现模拟对象创建,一般可以满足以下测试需求 1.要测试的模块依赖于其它自己控制不了的模块,如第三方服务,其它组员在开发的服务等,它们都没办法配合你来测试: 2.涉及到 ...

  6. SQLServer数据库操作

    --创建数据库create database 在线考试系统on(name=在线考试系统_DATA,filename='E:\DB\在线考试系统_DATA.mdf',size=5mb,maxsize=2 ...

  7. 【RAC】RAC相关基础知识

    [RAC]RAC相关基础知识 1.CRS简介    从Oracle 10G开始,oracle引进一套完整的集群管理解决方案—-Cluster-Ready Services,它包括集群连通性.消息和锁. ...

  8. 玩转spring boot——websocket

    前言 QQ这类即时通讯工具多数是以桌面应用的方式存在.在没有websocket出现之前,如果开发一个网页版的即时通讯应用,则需要定时刷新页面或定时调用ajax请求,这无疑会加大服务器的负载和增加了客户 ...

  9. 亲测可行，AndroidStudio 究竟如何配置gradle

    一.你不想看到的 Gradle Build Running 话说在天朝当程序员也是很不容易的,不管是查阅资料还是下载东西,很多时候你会发现自己上网姿势不对,当然对大多数程序员来说,这都不是事儿.这次重 ...

  10. php产生随机字符串

    /** * 产生随机字符串 * * @param int $length 输出长度 * @param string $chars 可选的 ,默认为 0123456789 * @return strin ...