1、前端页面

<div class="tkDiv" id="addLOGO" style="display:none;z-index:12;width:800px;height:auto;margin-left:-400px;margin-top: -160px">

	  		<div class="tk1_header" style="width:800px;height:40px;line-height:40px;background: #263552 !important;color: #ffffff !important;margin-left:-10px;margin-top:-10px;">
<span style="font-size: 16px;margin-left:20px;color:#FFF" id="gn_title">添加主页图片</span>
<a id="close_modal" style="width:30px;height:20px;background-size:20px;float: right;">×</a>
</div> <div class="tk1" id="addZ" style="width:750px;height:200px;">
<div class="tk1_content" id="registerDiv" style="width:750px;">
<form id="imageForm" class="bs-docs-example form-horizontal" method="post" action="<%=path %>/webCenter.do" enctype="multipart/form-data">
<input type="hidden" name="method" value="saveConferencesImage">
<input type="hidden" id="imageId" name="imageId" value="-1">
<table style="width:750px">
<tr height="50px">
<td align="right" width="150px" >
图片名称
</td>
<td>
<input id="imageName" class="form-control" name="imageName" type="text" style="margin-left:40px;display:inline-block;height:34px;"/>
</td>
</tr>
<tr height="50px">
<td align="right" width="150px" >
上传图片
</td>
<td>
<input id="imageFile" name="imageFile" type="file" style="margin-left:40px;display:inline-block;height:34px;"/>
</td>
</tr>
</table>
</form>
</div>
<div style="border-top: 1px solid rgba(0, 0, 0, 0.1);text-align: center;">
<input id="saveBtn" type="button" class="button" value="添 加" style="border-radius:0;width:260px;height:40px;margin:auto 50px;margin:20px; background: #263552 !important;color: #ffffff !important;"/>
</div>
</div>

  2、js代码

$(function(){
$("#saveBtn").click(function(){
var imageName = $("#imageName").val();
var imageFile = $("#imageFile").val();
if(imageName == '' || imageName.length == 0){
alert("请输入图片名称");
return;
}if(imageFile == '' || imageFile.length == 0){
alert("请选择要上传的图片");
return;
}
var formData = new FormData();
formData.append("imagePath", $("#imageFile")[0].files[0]);
$.ajax({
url:"<%=path%>/webCenter.do?uploadConImage",
type:"post",
data:formData,
dataType:"json",
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
beforeSend: function () {
console.log("正在进行,请稍候");
},
success:function(data){
if(data.state == 0){
alert(data.msg)
}else{
$("#imageForm").submit();
}
}
})
})
})

  3、后台数据处理

  ① 第一步验证图片大小

//判断图片大小,不是这个大小的提示不能上传
@RequestMapping(params = "uploadConImage",method = RequestMethod.POST)
public void uploadConImage(HttpServletRequest request,HttpServletResponse response){
try{
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
MultipartFile mFile = mRequest.getFile("imagePath");
InputStream is = mFile.getInputStream();//输入流
BufferedImage bufferedImg = ImageIO.read(is);
int width = bufferedImg.getWidth();//获取图片宽高
int height = bufferedImg.getHeight();
JSONObject json = new JSONObject(); if(width != 500 && height != 300){
float bili = (float)(new Float(height)/new Float(width));
float b = (float)(Math.round(bili*100))/100;
if(b != new Float(0.45)){
json.accumulate("state", 0);
json.accumulate("msg", "请上传分辨率为500*300的图片或者长宽比为0.6的图片(高除以宽为0.6)");
}else{
json.accumulate("state", 1);
}
}else{
json.accumulate("state", 1);
}
writeJson(response, json.toString());
} catch (Exception e) {
e.printStackTrace();
}
}

  ② 在js里面用$("#imageForm").submit();提交form表单,上传图片。注意:用form表单上传图片时,在from表单上要添加  enctype="multipart/form-data"  属性。form表单看上面代码,下面是后台数据处理。

@RequestMapping(params = "method=saveConferencesImage",method = RequestMethod.POST)
public void saveConferencesImage(int imageId,String imageName,HttpServletRequest request,HttpServletResponse response){
try {
HttpSession session = this.getSession(request);
Adminuser adminUser = session.getAttribute("centerAdminUser") == null?null:(Adminuser) session.getAttribute("centerAdminUser");
if(adminUser == null){
try {
response.sendRedirect(request.getContextPath()+"/center/index.jsp");
} catch (Exception e) {
e.printStackTrace();
}
}else{
String conId = request.getSession().getAttribute("conId") == null ? null: request.getSession().getAttribute("conId").toString();
if (conId == null) {
response.sendRedirect(request.getContextPath()+"/center/index.jsp");
}
Conferences conferences = webService.getConferencesById(Integer.parseInt(conId));
ConferencesImage conferencesImage = null;
if(imageId == -1){
conferencesImage = new ConferencesImage();
}else{
conferencesImage = webService.getConferencesImageById(imageId);
}
conferencesImage.setConferencesId(Integer.parseInt(conId));
conferencesImage.setImageName(imageName);
int level = webService.getConferencesImageLevel(Integer.parseInt(conId));
conferencesImage.setLevel(level);
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest)request;
MultipartFile mFile = mRequest.getFile("imageFile");
String fileName= mFile.getOriginalFilename();//获取文件名
fileName = fileName.substring(fileName.lastIndexOf("."),fileName.length());
String newFileName = String.valueOf(System.currentTimeMillis())+"_mainPage"+fileName;
String filePath = request.getSession().getServletContext().getRealPath("/");
filePath = filePath + conferences.getAbbreviation()+"/images/mainPage/";
File file = new File(filePath);
if(!file.exists()){
file.mkdirs();
}
File saveFile = new File(filePath+newFileName);
mFile.transferTo(saveFile);
conferencesImage.setImageUrl("/"+conferences.getAbbreviation()+"/images/mainPage/"+newFileName);
webService.saveObject(conferencesImage);
response.sendRedirect(request.getContextPath()+"/webCenter.do?getConferencesImage");
}
} catch (Exception e) {
e.printStackTrace();
}
}

  

form表单图片上传的更多相关文章

  1. JS form表单图片上传

    // 点击file 类型的input 触发的方法 function changesProvider(){ // fileProvider -> input中的name属性值 var f = do ...

  2. MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

  3. Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传

    Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV       在Django中存 ...

  4. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  5. JAVA入门[16]-form表单,上传文件

    一.如何传递参数 使用 @RequestParam 可以传递查询参数.例如:http://localhost:8092/category/detail?id=1 @RequestMapping(&qu ...

  6. form表单文件上传 servlet文件接收

    需要导入jar包 commons-fileupload-1.3.2.jar commons-io-2.5.jar Upload.Jsp代码 <%@ page language="jav ...

  7. form表单文件上传提交且接口回调显示提交成功

    前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...

  8. Ajax serialize()提交form表单不能上传file类型

    前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...

  9. SSM+form表单文件上传

    这里介绍SSM如何配置上传文件 配置springmvc.xml: <!--配置上传下载--> <bean id="multipartResolver" class ...

随机推荐

  1. java基础知识—运算符和基本选择结构

    1.保存真假,使用boolean变量 boolean有两个值:true 真 false 假 2.从控制台接受输入信息,通过创建扫描器 Sacnner input=new Sacnner(System. ...

  2. js中级

    闭包:函数在调用的时候,会形成一个私有作用域,内部的变量不会被访问, 这种保护机制叫闭包.这就意味着函数调用完毕,这个函数形成的栈内存会被销毁. 重点 函数归属谁跟他在哪调用没有关系,跟在哪定义有关. ...

  3. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  4. Spark笔记

    Spark基础 第一节:什么是Spark?Spark的特点和结构 1.什么是Spark? Spark是一个针对大规模数据处理的快速通用引擎. 类似MapReduce,都进行数据的处理 2.Spark的 ...

  5. 利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [python3.6+opencv] 02 imwrite-打开图像后保存退出还是不保存退出的问题

    加载一个灰度图,显示图片,按下’s’键保存后退出, 或者按下 ESC 键退出不保存 # -*- coding: utf-8 -*- import numpy as np import cv2 as c ...

  7. [python3.6+opencv] 01 完成读取图片操作

    学习一下opencv3 奈何vs2017配的云里雾里,还是使用python吧 --人生苦短,python来凑 --使用Pycharm操作,面向界面的Pycharm好一些吧(我猜的) 新建Project ...

  8. linux之特殊字符

    特殊字符: 与路径和位置有关的特殊字符: ~  用户的家目录,超级用户为/root _  用户(-) 代表上一次用户所在路径 .代表当前目录(. 还有很多其他含义) ..代表上一级目录 通配符 *匹配 ...

  9. 学习C语言,在软件测试中如何用?

    1)为什么学? 掌握基础: 编写测试脚本: 自动化: 性能测试: 看懂代码,定位问题(白盒测试). C语言如何开发有界面的程序? 首先给大家扫盲:1 什么叫做界面程序:   归根到底就是设置LCD上的 ...

  10. asp.net webapi 生成在线文档--Swagger

    第一步:使用nuget包获取Swashbule.swagger.net.ui的包并安装. 安装成功后 打开App_Start->SwaggerNet.cs 注释掉一下两行 //[assembly ...