问题：

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

思路：

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. Spring学习（11）---JSR-250标准注解之 @Resource、@PostConstruct、@PreDestroy

    1)@Resource(JSR-250标准注解,推荐使用它来代替Spring专有的@Autowired注解) Spring 不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定 ...

  2. python模块之argparse--参数解析

    一.简介: argparse是python用于解析命令行参数和选项的标准模块,用于代替已经过时的optparse模块.argparse模块的作用是用于 解析命令行参数,例如python parseTe ...

  3. Hibernate的使用

    1 创建一个Java项目,在项目中新建一个lib,将需要的Hibernate包和MySQL包导入,并Build Path 2 在src下添加Hibernate.cfg.xml在此文件中对Hiberna ...

  4. 【CC2530入门教程-03】CC2530的中断系统及外部中断应用

    第3课  CC2530的中断系统及外部中断应用 广东职业技术学院  欧浩源 一.中断相关的基础概念  内核与外设之间的主要交互方式有两种:轮询和中断. 轮询的方式貌似公平,但实际工作效率很低,且不能及 ...

  5. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

  6. SSH连接不上CentOS 主机配置文件导致的原因的解决方法

    一.CentOS之SSH的安装与配置 SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定SSH 为建立在应用层和传输层基础上 ...

  7. bootstrap-table前台和后台分页对json格式的要求

    Bootstrap是一款前端非常流行的框架,其中的表格更为大家经常使用.大家都知道表格的分页分为前台和后台分页,也就是表格配置中sidePagination属性,当sidePagination: &q ...

  8. php session_start()报错 解决办法

    1.php.ini中的output_buffering=off 改成output_buffering=4096 2.php.ini中的session.save_path是否设置好了 3.php.ini ...

  9. ajax数据请求2（json格式）

    ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  10. kotlin的一些特性介绍和与java C#的简单对比

    前言 这是我之前在知乎上的一些回答的汇总,感觉还是博客园写这些东西方便一点,也算是理下我的一些思路,现将文章整理后,发布在园子里. 为何是kotlin: 很多人对kt没有一个正确的定位,可能大家第一反 ...