问题：

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

思路：

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. ue4打包问题的巧妙解决——二分回退大法！

    昨天突然发生了一件非常恐怖的事--我的ue4项目居然不能打包了!! 大概是这么一回事:  UATHelper: 打包 (Windows (64位)): UnrealBuildTool: ERROR:  ...

  2. HTML/XML/XPATH基础

    Html超文本标记语言 网页上单击右键→查看源文件/查看源代码 Html基本结构 <html>               为文档根元素,所有元素都在内部进行 <head>   ...

  3. 编写一个简单的Web Server

    编写一个简单的Web Server其实是轻而易举的.如果我们只是想托管一些HTML页面,我们可以这么实现: 在VS2013中创建一个C# 控制台程序 编写一个字符串扩展方法类,主要用于在URL中截取文 ...

  4. 透过源码看看Redis中如何计算QPS

    通常我们采集Redis的性能数据时,或者想要知道Redis当前的性能如何时,需要知道这个实例的QPS数据,那么这个QPS数据是如何计算的呢?我们都有哪些办法或者这个QPS ? QPS顾名思义就是每秒执 ...

  5. react native－调用react－native－fs插件时，如果数据的接口是需要验证信息的，在android上运行报错

    调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...

  6. jersery+jetty嵌入式restful的框架开发

    随着微服务的流程,越来越多的后台服务采用了restful api风格的开放API,jersery+jetty嵌入式变成了一个很好的选择, 我自己写了一个简单的框架,https://github.com ...

  7. ELK-Kibana-01

      1.Kibana介绍   Kibana 是一个设计使用和Elasticsearch配置工作的开源分析和可视化平台.可以用它进行搜索.查看.集成Elasticsearch中的数据索引.可以利用各种图 ...

  8. 委托（C#）

    委托,delegate 关键字用于声明一个引用类型,该引用类型可用于封装命名方法或匿名方法.委托类似于 C++ 中的函数指针:但是,委托是类型安全和可靠的.委托类型声明的格式如下: public de ...

  9. docker 初识之二（简单发布ASP.NET Core 网站）

    在发布ASP.NET Core网站以前,先介绍一下DaoCloud 一个免费的docker云容器服务平台.登陆官方网站,创建一台docker主机,这台主机有120分钟的使用时间,对于鄙人学习使用正好合 ...

  10. [命令行] curl查询公网出口IP

    转载:http://blog.csdn.net/orangleliu/article/details/51994513 不管是在家里还是办公室,或者是公司的主机,很多时候都是在内网中,也就是说很多都是 ...