问题：
最近在做项目时，遇到上传图片需求，且在不跳转的情况下获取到返回信息
思路：
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. 参考网址：