问题：

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

思路：

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. hibernate操作步骤（代码部分）

    1.加载hibernate的核心配置文件 2.创建SessionFactory对象 3.使用SessionFactory创建Session对象 4.开启事务(手动开启) 5.写具体逻辑crud,增删改 ...

  2. badboy录制兼容性有趣测试

    badboy录制默认是启动IE浏览器,使用badboy录制脚本时,遇到测试系统对IE浏览器不兼容时,就需要考虑换浏览器,修改为其他浏览器(如firefox.chrome)录制,只需要设置该浏览器为默认 ...

  3. B树和B+树的总结

    B树 为什么要B树 磁盘中有两个机械运动的部分,分别是盘片旋转和磁臂移动.盘片旋转就是我们市面上所提到的多少转每分钟,而磁盘移动则是在盘片旋转到指定位置以后,移动磁臂后开始进行数据的读写.那么这就存在 ...

  4. c++字符串的输入的思考

    字符串的输入,是学习c++的一个重点,也是一个极富有细节意味的知识点,如果你不了解这些细节,你可能会在写程序时犯错而一脸懵逼不知所措. 与此同时,我们要了解c++缓冲区的概念,程序的输入都建有一个缓冲 ...

  5. 基于android的语音识别

    1.注册账户,添加应用 2.针对android平台的选择应用,下载SDK 3.将SDK的libs下文件拷贝到工程的libs目录下 4.添加用户权限 <uses-permission androi ...

  6. 如何在linux如何安装nginx服务器

    1.进入命令窗口: 2.进入nginx.org 网站 下载安装包nginx-1.8.0.tar.gz 3.进入下载的文件夹 4.加压下载的压缩包 tar  -zxvf nginx-1.8.0.tar. ...

  7. arcgis api for js入门开发系列十二地图打印（GP服务）

    上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...

  8. wildfly10报错2:ID注释有错

    13:55:56,612 INFO [org.jboss.modules] (main) JBoss Modules version 1.5.1.Final 13:55:56,891 INFO [or ...

  9. nginx常用配置系列-HTTPS配置

    接上篇,nginx配置系列 HTTPS现在已经很流行,特别是AppStore上线的应用要求使用HTTPS进行通信,出于安全考虑也应该使用HTTPS,HTTPS配置需要准备证书文件,现在也有很多免费证书 ...

  10. jquery取出所有包含class='engineer_val'的值

    $(".engineer_val").each(function(){ //jquery取出所有包含class='engineer_val'的值 $(); });