您的位置：首页 > Web前端 > JQuery

spring+jquery 实现文件上传，二次发送

2016-07-19 17:23 483 查看 
</pre><h1>后台：</h1><pre name="code" class="java">package com.li.Controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.li.Base.BaseController;
import com.li.Table.PublicPicTable;
import com.li.Table.PublicPicTable.PublicPic;

@Controller
@RequestMapping(value = "manager")
public class ManagePlatFormController extends BaseController
{
@RequestMapping(value = "upload")
public void Upload(@RequestParam("pic")
MultipartFile[] files, @RequestParam("url")String[] urls, HttpServletResponse response)
{
String strRet = String.format("{\"status\":\"%d\",\"info\":\"", 1);
for (int i = 0; i < files.length; i++)
{
if (!files[i].isEmpty())
{
try
{
InputStream is = files[i].getInputStream();
String path =  "D:/" + System.currentTimeMillis() + files[i].getOriginalFilename();
FileOutputStream os = new FileOutputStream(new File(path));
int count = 0;
byte[] bytes = new byte[1024];
while((count = is.read(bytes)) != -1)
{
os.write(bytes);
}
os.flush();
os.close();
is.close();
if (i == 0)
{
strRet += String.format("%s#%s", urls[i], path);
continue;
}
strRet += String.format("&%s#%s", urls[i], path);
}
catch (Exception e)
{
// TODO: handle exception
}
}
}
strRet += "\"}";
ResponseJson(response, strRet);
}

@RequestMapping(value = "addpublicpic")
public void AddPublicPic(HttpServletRequest request,
HttpServletResponse response)
{
String strJson = GetRequestBody(request);
JSONObject JsonRoot = JSONObject.fromObject(strJson);
PublicPicTable lTable = new PublicPicTable();
PublicPic lb = lTable.FromJson(JsonRoot);
boolean bRet = lTable.AddRecord(lb);
if (false == bRet)
{
ResponseJson(response, "{\"status\":0,\"info\":\"异常\"}");
return;
}

ResponseJson(response, "{\"status\":1,\"info\":\"\"}");
}

}

html:

<%@ 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">
<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 style="margin-left: 5%; margin-right: 5%;">
<form class="form-horizontal myform" id="lunboform" role="form">
<h3 class="text-center">发布</h3>
<div class="form-group">
<label for="aihaoid" class="col-sm-1 control-label">爱好ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="aihaoid"
placeholder="请输入爱好ID">
</div>
</div>
<div class="form-group">
<label for="pic1" class="col-sm-1 control-label">轮播图1)</label>
<div class="col-sm-4">
<input type="file" class="form-control" id="pic1" name="pic">
</div>
<label for="url1" class="col-sm-offset-1 col-sm-1 control-label">链接1)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url1" name="url">
</div>
</div>
<div class="form-group">
<label for="pic2" class="col-sm-1 control-label">轮播图2)</label>
<div class="col-sm-4">
<input type="file" class="form-control" id="pic2" name="pic">
</div>
<label for="url2" class="col-sm-offset-1 col-sm-1 control-label">链接2)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url2" name="url">
</div>
</div>
<div class="form-group">
<label for="pic3" class="col-sm-1 control-label">轮播图3)</label>
<div class="col-sm-4">
<input type="file" class="form-control" id="pic3" name="pic">
</div>
<label for="url3" class="col-sm-offset-1 col-sm-1 control-label">链接3)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url3" name="url">
</div>
</div>
<div class="form-group">
<label for="pic4" class="col-sm-1 control-label">轮播图4)</label>
<div class="col-sm-4">
<input type="file" class="form-control" id="pic4" name="pic">
</div>
<label for="url4" class="col-sm-offset-1 col-sm-1 control-label">链接4)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url4" name="url">
</div>
</div>
<div class="form-group">
<label for="pic5" class="col-sm-1 control-label">轮播图5)</label>
<div class="col-sm-4">
<input type="file" class="form-control" id="pic5" name="pic">
</div>
<label for="url5" class="col-sm-offset-1 col-sm-1 control-label">链接5)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="url5" name="url">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<button type="submit" id="lunbosubmit" class="btn bg-primary btn-block">登录</button>
</div>
</div>
</form>
</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>
<!--ajaxfileupload-->
<script src="js/ajaxfileupload.js"></script>
<script src="js/fileupload.js"></script>
</body>
</html>

js:

$(document).ready(function() {
$('#lunboform').ajaxForm({
url: '../manager/upload',
type: 'post',
dataType: 'JSON',
success: function (data) {
$.ajax({
url:"../manager/addpublicpic",
data:"{\"aihaoid\":\""+$('#aihaoid').val()+"\",\"pics\":\""+data.info+"\"}",
type:"post",
success:function(a){
alert(a.info);
}
});
},
error: function (data, status, e)
{
alert("【服务器异常，请连续管理员！】"+e);
}
});

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航