您的位置：首页 > 编程语言 > Java开发

ajax文件和文件其他属性进行上传给后台spring mvc

2016-07-18 22:52 471 查看

$(document).ready(function() {
$('#lunbosubmit').on('click', function() {
$.ajaxFileUpload({
url : "http://localhost/ManageSystem/manager/upload",
type : 'post',
secureuri : false,
fileElementId : 'myfile0',
fileElementId : 'myfile1',
fileElementId : 'myfile2',
dataType : 'json',
success : function(data) {
debugger;
var aihaoid = $('#aihaoid').val();
var myfile = new Array();
for(var i = 0; i < 3; i++)
{
myfile[i] = data.info.split("&")[i];
}
var myurl0 = $('#url0').val()
var myurl1 = $('#url1').val()
var myurl2 = $('#url2').val()
$.ajax({
url : "http://localhost/ManageSystem/manager/addpublicpic",
data : "{\"aihaoid\":\"" + aihaoid
+ "\",\"myfile1\":\"" + myfile[0]
+ "\",\"myurl1\":\"" + myurl0
+ "\",\"myfile2\":\"" + myfile[1]
+ "\",\"myurl2\":\"" + myurl1
+ "\",\"myfile3\":\"" + myfile[2]
+ "\",\"myurl3\":\"" + myurl2 + "\"}",
type : "post",
success : function(a) {
alert("成功");
},
error : function(){
alert("失败");
}
});

},
error : function(data, status, e) {
alert("【服务器异常，请连续管理员！】" + e);
HideLoadMask();
}
});

});
});

如果是出现跨域，即不同端口或者不同IP进行访问，需要进行跨域的声明：

<!-- 解决XMLHttpRequest cannot load,跨域问题 -->
<meta http-equiv="Access-Control-Allow-Origin" content="*">

如果不是跨域直接url: ./manager/upload即可。

我的JSP：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 兼容IE8-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<!--设备宽度比例为1，实现响应式-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 解决XMLHttpRequest cannot load,跨域问题 -->
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>左左后台发布管理</title>

<!--导入bootstrap的Css样式-->
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/base.css" rel="stylesheet">

<link href="css/lunbo.css" rel="stylesheet">

</head>

<body>

<div class="top">
<p>左左运动后台欢迎您</p>
</div>

<div class="leftbody">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="index.jsp">主界面</a>
</li>
<li role="presentation" class="active"><a href="lunbo.jsp">轮播图</a>
</li>
</ul>
</div>

<div class="rightbody">
<div class="righttitle">
<h1>轮播图</h1>
</div>
<div>
<!-- <div id="drop_area" style="min-width:300px;min-height:100px;border:3px dashed silver;text-align: center">将图片拖拽到此区域</div><div id="preview"></div> -->

<h3 class="text-center">发布</h3>
<div class="form-group">
<label for="aihaoid" class="col-sm-2 control-label">爱好ID</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="aihaoid"
name="aihaoid">
</div>
</div>
<div class="form-group">
<label for="myfile1" class="col-sm-2 control-label">轮播图(1)</label>
<div class="col-sm-3">
<input type="file" class="form-control" id="myfile0"
name="myfiles">
</div>
<label class="col-sm-2 control-label">文章链接(1)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url0" name="url">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">轮播图(2)</label>
<div class="col-sm-3">
<input type="file" class="form-control" id="myfile1"
name="myfiles">
</div>
<label class="col-sm-2 control-label">文章链接(2)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url1" name="url">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">轮播图(3)</label>
<div class="col-sm-3">
<input type="file" class="form-control" id="myfile2"
name="myfiles">
</div>
<label class="col-sm-2 control-label">文章链接(3)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url2" name="url">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button id="lunbosubmit" class="btn btn-primary btn-lg btn-block"><span
class="glyphicon glyphicon-send" aria-hidden="true"></span> 提交
</button>
</div>
</div>

</div>
</div>

<div class="navbar-fixed-bottom;">
<p>
<a>©</a>
</p>
</div>

<!--导入依赖的JQuery-->
<script src="js/jquery-1.9.1.min.js"></script>
<!--导入bootstrap的js文件-->
<script src="js/bootstrap.min.js"></script>
<!--导入ajax.form的js文件-->
<script src="js/jquery.form.min.js"></script>
<!--导入ajax.fileupload的js文件-->
<script src="js/ajaxfileupload.js"></script>
<script src="js/fileupload.js"></script>
</body>
</html>

使用简单的bootstrap+jquery。

记录下来，方便自己用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航