ajaxSubmit 实现图片上传 SSM maven
文件上传依赖：
<!-- 文件上传组件 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>${commons-fileupload.version}</version>
</dependency> <dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
在springmvc配置文件中增加解析器：
<!--SpringMvc文件上传时,需要配置MultipartResolver处理器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
<property name="maxUploadSize" value="10485760"></property>
</bean>
引入JS----jquery.form.js
<!--最基础jQuery.js都是基于这个 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery-1.11.3.min.js"></script>
<!-- 异步转换参数js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jqueryExt.js"></script>
<!-- 上传文件js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery.form.js"></script>
页面表单设置：
<!--form提交表单 -->
<form class="form-horizontal" id="form1" enctype="multipart/form-data"> <div class="row clearfix">
<div class="form-group">
<label class="col-sm-1 control-label">编号:</label>
<div class="col-md-2 column">
<!--编号 -->
<input type="hidden" id="Staff_ID" class="form-control" name="Staff_ID" placeholder="请输入">
<input type="text" id="Staff_No" class="form-control" readonly name="Staff_No" placeholder="">
</div> <label class="col-sm-1 control-label">工号:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Code" onblur="setStaffId()" class="form-control" name="Staff_Code" placeholder="请输入工号">
</div> <label class="col-sm-1 control-label">姓名:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Name" class="form-control" name="Staff_Name" placeholder="请输入姓名" >
<span class="required" id="sp1">*</span>
</div> </div>
</div> <div class="row clearfix">
<div class="form-group">
<label class="col-sm-1 control-label">用户名:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_LoginName" class="form-control" name="Staff_LoginName" placeholder="请输入用户名">
<span class="required" id="sp3">*</span>
</div>
<label class="col-sm-1 control-label">密码:</label>
<div class="col-md-2 column">
<input type="password" id="Staff_Pass" class="form-control" name="Staff_Pass" placeholder="请输入密码">
</div>
<label class="col-sm-1 control-label">职称:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Title" class="form-control" name="Staff_Title" placeholder="请输入职称">
<span class="required" id="sp2">*</span>
</div>
</div>
</div> <div class="row clearfix">
<div class="form-group">
<label class="col-sm-1 control-label">级别:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Level" class="form-control" name="Staff_Level" placeholder="请输入级别">
</div>
<label class="col-sm-1 control-label">图片:</label>
<div class="col-md-3 column">
<input type="file" name="goodsImage"/>
</div>
<label class="col-sm-1 control-label">状态:</label>
<div class="col-md-2 column">
<select class="form-control" name="Staff_Enable">
<option value="1">启用</option>
<option value="0">注销</option>
</select>
</div> </div>
</div> <input type="button" id="saveUploadOrUpdate" data-toggle='modal' data-target='#myModal' class="btn btn-primary" value="保存">
</form>
/* 上传文本图片和修改 */
$(document).on("click","#saveUploadOrUpdate",function(){
$("#form1").ajaxSubmit({
url:"userss/saveUploadOrUpdate",
type:"post",
contentType:"application/x-www-form-urlencoded; charset=utf-8",
dataType:"text",
success:function(data){
alert(data);
queryUsers(1);
}
});
});
控制器中实现文件上传：
/*添加内容上传图片和修改*/
@RequestMapping("/saveUploadOrUpdate")
public void saveTbGoods(@RequestParam("goodsImage") MultipartFile file,StaffInfo tb,HttpServletRequest request,HttpServletResponse response) throws IOException{
System.out.println("文件："+file+"参数："+tb);
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String pathName=transfer(file, request);//调用上传文件transfer方法得到文件路径
tb.setStaff_Pic(pathName);//添加set文件路径到数据库
int i=userServices.saveOrUpdateStaffInfo(tb);
if(i>0){
out.print("添加成功!");//往前台打印text文本格式
}else{
out.print("添加失败!");
}
}
/*上传文件*/
private String transfer(MultipartFile file,HttpServletRequest request){
//获取目标文件要存放的目录的绝对路径
String path=request.getServletContext().getRealPath("/resouces/upload");
String fileName=file.getOriginalFilename();//获取原始的文件名
File tranFile=new File(path,fileName);//创建目标文件对象
if(!tranFile.exists()){//如果目录不存在
tranFile.mkdirs();//创建目录
}
try {
file.transferTo(tranFile);//文件上传
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} return request.getContextPath()+"/resouces/upload/"+fileName;
}
如何显示：
tr+="<td><img style=' width:90px; height:60px;' src='"+obj.Staff_Pic+"'/></td>";
jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored="false"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 使用模态窗口引入bootstrap -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resouces/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resouces/js/bootstrap/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/resouces/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resouces/js/bootstrap/js/bootstrap.min.js"></script>
<!--最基础jQuery.js都是基于这个 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery-1.11.3.min.js"></script>
<!-- 异步转换参数js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jqueryExt.js"></script>
<!-- 上传文件js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery.form.js"></script>
</head> <body>
<table class="table table-hover">
<thead >
<tr class="success">
<th>员工序号</th>
<th>员工编号</th>
<th>员工工号</th>
<th>员工姓名</th>
<th>用户名</th>
<th>员工密码</th>
<th>员工职称</th>
<th>员工级别</th>
<th>员工图片</th>
<th>是否启用</th>
<th colspan="3">查询
<input type="text" onblur="queryUsers()" size="7" class="goodsName" id="goodsNames" placeholder="请输入姓名" name="goodsName">
<%-- <input type="text" onblur="queryTbGoods()" size="6" class="goodsName" id="typeNames" placeholder="请输入类型" name="typeName">--%>
<input type="button" data-toggle="modal" data-target="#myModal" class="emptys btn btn-default" value="添加">
</th> </tr>
</thead>
<tbody id="tbody"> </tbody>
</table> <!-- 模态框弹出录入内容 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="modalTitle1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width:760px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
×
<!-- 关闭按钮 -->
</button>
<h4 class="modal-title" id="modalTitle1">录入员工</h4>
</div>
<div class="modal-body"> <!--form提交表单 -->
<form class="form-horizontal" id="form1" enctype="multipart/form-data"> <div class="row clearfix">
<div class="form-group">
<label class="col-sm-1 control-label">编号:</label>
<div class="col-md-2 column">
<!--编号 -->
<input type="hidden" id="Staff_ID" class="form-control" name="Staff_ID" placeholder="请输入">
<input type="text" id="Staff_No" class="form-control" readonly name="Staff_No" placeholder="">
</div> <label class="col-sm-1 control-label">工号:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Code" onblur="setStaffId()" class="form-control" name="Staff_Code" placeholder="请输入工号">
</div> <label class="col-sm-1 control-label">姓名:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Name" class="form-control" name="Staff_Name" placeholder="请输入姓名" >
<span class="required" id="sp1">*</span>
</div> </div>
</div> <div class="row clearfix">
<div class="form-group">
<label class="col-sm-1 control-label">用户名:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_LoginName" class="form-control" name="Staff_LoginName" placeholder="请输入用户名">
<span class="required" id="sp3">*</span>
</div>
<label class="col-sm-1 control-label">密码:</label>
<div class="col-md-2 column">
<input type="password" id="Staff_Pass" class="form-control" name="Staff_Pass" placeholder="请输入密码">
</div>
<label class="col-sm-1 control-label">职称:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Title" class="form-control" name="Staff_Title" placeholder="请输入职称">
<span class="required" id="sp2">*</span>
</div>
</div>
</div> <div class="row clearfix">
<div class="form-group">
<label class="col-sm-1 control-label">级别:</label>
<div class="col-md-2 column">
<input type="text" id="Staff_Level" class="form-control" name="Staff_Level" placeholder="请输入级别">
</div>
<label class="col-sm-1 control-label">图片:</label>
<div class="col-md-3 column">
<input type="file" name="goodsImage"/>
</div>
<label class="col-sm-1 control-label">状态:</label>
<div class="col-md-2 column">
<select class="form-control" name="Staff_Enable">
<option value="1">启用</option>
<option value="0">注销</option>
</select>
</div> </div>
</div> <input type="button" id="saveUploadOrUpdate" data-toggle='modal' data-target='#myModal' class="btn btn-primary" value="保存">
</form> </div>
<div class="modal-footer"> <button type="button" class="up btn btn-default" data-dismiss="modal">关闭
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<ul class="pager" >
<li>
当前页:<span id="curPage"></span>总页数:<span id="totalPages"></span>总共:<span id="totals"></span>条记录
</li>
<li><a id="first" onclick="changePage(this)">首页</a></li>
<li><a id="prev" onclick="changePage(this)">上一页</a></li>
<li><a id="next" onclick="changePage(this)">下一页</a></li>
<li><a id="last" onclick="changePage(this)">尾页</a></li>
<li><input type="number" id="txtCurPage" min="1" max="10"></input><input type="button" class="btn btn-default" value="go" onclick="gotoPage()"/></li>
</ul>
</body>
</html>
<script>
$(function(){
queryUsers(1);
queryTbGoodsType();
});
/* 查询商品表 */
function queryUsers(page){ var name=$("#goodsNames").val();
// alert(name+":参数:");
$.ajax({
url:"userss/queueUsers",
type:"post",
data:{"staffName":name,"pageNum":page,"pageSize":3},
dataType:"json",
success:function(data){
//alert(data.pages);
$("#tbody").empty(); $.each(data.list,function(key,obj){
// alert(obj.Staff_Pic);
var tr="<tr>";
tr+="<td>"+obj.Staff_ID+"</td>";
tr+="<td>"+obj.Staff_No+"</td>";
tr+="<td>"+obj.Staff_Code+"</td>";
tr+="<td>"+obj.Staff_Name+"</td>";
tr+="<td>"+obj.Staff_LoginName+"</td>";
tr+="<td>"+obj.Staff_Pass+"</td>";
tr+="<td>"+obj.Staff_Title+"</td>";
tr+="<td>"+obj.Staff_Level+"</td>";
tr+="<td><img style=' width:90px; height:60px;' src='"+obj.Staff_Pic+"'/></td>";
if(obj.Staff_Enable=='1'){
tr+="<td>启用</td>";
}else{
tr+="<td>"+obj.Staff_Enable+"</td>";
}
tr+="<td><input type='button' id="+obj.Staff_ID+" data-toggle='modal' data-target='#myModal' title="+obj.Staff_ID+" class='findById btn btn-default' value='修改'></td>";
tr+="<td><input type='button' id="+obj.Staff_ID+" class='delete btn btn-default' value='删除'></td>";
tr+="</tr>";
$("#tbody").append(tr); //重新初始化分页链接
$("#curPage").html(data.pageNum);//当前页
$("#totalPages").html(data.pages);//总页数
$("#totals").html(data.total);//总条数
$("#first").attr("data",1);//首页
$("#prev").attr("data",data.prePage);//上一页
$("#next").attr("data",data.nextPage);//下一页
$("#last").attr("data",data.pages);//尾页
$("#txtCurPage").val(data.pageNum).attr("max",data.pages);
});
}
});
}
//改变页面
function changePage(obj){
var page=$(obj).attr("data");//取出data属性值
queryUsers(page);
}
//跳转到指定页面
function gotoPage(page){
var page=$("#txtCurPage").val();
queryUsers(page);
}
/*查询商品类型 */
function queryTbGoodsType(){
$.ajax({
url:"goods/queryTbGoodsType",
type:"post",
data:"",
dataType:"json",
success:function(data){
for(var i=0;i<data.length;i++){
var obj=data[i];
$(".sele").append("<option value='"+obj.typeId+"'>"+obj.typeName+"</option>");
}
}
});
}
/* 添加修改之前清空form表单 */
$(document).on("click",".emptys",function(){
$("#Staff_ID").val("");
$("#Staff_No").val("");
$("#Staff_Code").val("");
$("#Staff_Name").val("");
$("#Staff_LoginName").val("");
$("#Staff_Pass").val("");
$("#Staff_Title").val("");
$("#Staff_Level").val("");
$("#Staff_Pic").val("");
$("#Staff_Enable").val("");
});
/*添加修改 */
/*$(document).on("click","#saveUploadOrUpdate",function(){
//alert($("#form1").serialize());
$.ajax({
url:"users/saveUploadOrUpdate",
type:"post",
data:$("#form1").serialize(),
dataType:"text",
success:function(data){
alert(data);
queryUsers();
}
});
});*/ /* 上传文本图片和修改 */
$(document).on("click","#saveUploadOrUpdate",function(){
$("#form1").ajaxSubmit({
url:"userss/saveUploadOrUpdate",
type:"post",
contentType:"application/x-www-form-urlencoded; charset=utf-8",
dataType:"text",
success:function(data){
alert(data);
queryUsers($("#curPage").html());//刷新当前页面
//changePage(last);//添加刷新指向尾页 }
});
});
/*修改前查询 */
$(document).on("click",".findById",function(){
var id=this.id;
$.ajax({
url:"userss/queueById",
type:"post",
data:{"staffId":id},
dataType:"json",
success:function(data){
$("#Staff_ID").val(data.Staff_ID);
$("#Staff_No").val(data.Staff_No);
$("#Staff_Code").val(data.Staff_Code);
$("#Staff_Name").val(data.Staff_Name);
$("#Staff_LoginName").val(data.Staff_LoginName);
$("#Staff_Pass").val(data.Staff_Pass);
$("#Staff_Title").val(data.Staff_Title);
$("#Staff_Level").val(data.Staff_Level);
$("#Staff_Pic").val(data.Staff_Pic);
$("#Staff_Enable").val(data.Staff_Enable);
}
});
});
$(document).on("click",".delete",function(){
var id=this.id;
if (confirm("您确定要删除此信息吗？")){
$.ajax({
url:"userss/deleteGoods",
type:"post",
data:{"goodsId":id},
dataType:"text",
success:function(data){
alert(data);
queryUsers($("#curPage").html());//刷新当前页面
}
});
}else{
return false;
}
}); /*失去焦点*/
function setStaffId(){
var Id=$("#Staff_Code").val();
$("#Staff_No").val(Id); } </script>
ajaxSubmit 实现图片上传 SSM maven的更多相关文章
- input[type=file]中使用ajaxSubmit来图片上传
今天在使用input[type=file]上传图片到服务器时,因为项目要求,并不是像常见的通过按钮来提交表单事件,而是图片上传后就自动执行表单提交事件,将上传的图片信息传给服务器. 刚开始我是这样执行 ...
- ssm框架实现图片上传显示并保存地址到数据库
本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片. 本项目是使用maven搭建的项目,首先看下项目结 ...
- Ueditor1.4.3.3+springMvc+maven 实现图片上传
前记:由于项目中需要有一个新增数据并且要能支持表格图片上传的功能.使用了ueditor控件.为实现这个功能,从一开始什么都看不懂,到一直连着弄了5天,总算是有了眉目.在此记录一下以便能帮到可以和我一样 ...
- 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
- ssm实现图片上传
在使用ssm完成前后端对接时,总免不了前台传过来的文件问题,而html中的<input>框直接使用时,往往会获取不到路径,今天在完成图片上传后的来做个总结 首先,前台页面 <!DOC ...
- ssm使用Ajax的formData进行异步图片上传返回图片路径，并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...
- SSM实现图片上传管理操作
Spring MVC 实现文件上传 时序图 利用 Spring MVC 实现文件上传功能,离不开对 MultipartResolver 的设置.MultipartResolver 这个类,你可以将其视 ...
- 在SSM框架中如何将图片上传到数据库中
今天我们来看看SSM中如何将图片转换成二进制,最后传入到自己的数据库中,好了,废话不多说,我们开始今天的学习,我这里用的编辑器是IDEA 1.导入图片上传需要的jar依赖包 1 <depende ...
- （SSM框架）实现小程序图片上传（配小程序源码）
阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...
随机推荐
- luogu P1068 分数线划定 x
P1068 分数线划定 题目描述 世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,A 市对 所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根 据 ...
- [CF535D]Tavas and Malekas 题解
题意简述 有一个空着的长度为\(n\)的字符串\(ans\),再给出一个长度为\(m\)的序列\(a\),现要在序列中每个元素\(a_i\)的位置开始都规定必须为一个给定的字符串\(s\).问字符串\ ...
- Windows server 2003+IIS6+PHP5.4.45环境搭建教程
今天试了一下升级到PHP 5.4.45,但是却发现了不少问题.在以前PHP 5.2.X中,只需要使用php5isapi.dll的方式就可以,但在PHP 5.3以后却不再支持ISAPI模式了,也没有此文 ...
- #1112-JSP生命周期
JSP 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期. JSP生命周期就是从创建到销毁的整个过程,类似于servlet生命周期,区别在于JSP生命周期还包括将JSP文件编译成ser ...
- RedisTemplate访问Redis数据结构（三）——Hash
HashOperations提供一系列方法操作hash.首先初始化spring工厂获得redisTemplate和opsForHash private RedisTemplate<String, ...
- 170830-关于JdbcTemplate的练习题以及其中的问题
实验1:测试数据源 在spring文件中配置: 测试数据源: 结果: 实验2:将emp_id=5的记录的salary字段更新为1300.00[更新操作] update函数中,第一个是sql语句,后面的 ...
- centos6.X mysql 5.1 主主配置
1.配置文件 A库的配置文件: 在 /etc/my.cnf [mysqld] 段 新增: server_id= # log_bin 日志路径.格式以及删除时间(30天) log_bin=/var/li ...
- SQLite入门语句之约束
一.SQLite约束之NOT NULL 确保某列不能有 NULL 值.默认情况下,列可以保存 NULL 值.如果您不想某列有 NULL 值,那么需要在该列上定义此约束,指定在该列上不允许 NULL 值 ...
- 在阿里云centOS7上部署Redis 5.0.5主从 + 哨兵模式
一.在两台服务器上分别安装.配置Redis 5.0.5 ,为一主一从 安装Redis关键命令: 将安装包上传至:/home 目录下解 压:.tar.gz 安装依赖:yum install gcc 安装 ...
- springboot定时任务出错 Unexpected use of scheduler.
java.lang.IllegalStateException: Unexpected use of scheduler. 在启动类加: @Bean public ThreadPoolTaskSche ...