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. SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式

    博客地址:http://blog.csdn.net/FoxDave JavaScript库格式 不同的JavaScript库的编译和打包方式各不相同.一些是以模块的方式打包的,而另一些是以纯脚本运行在 ...

  2. 关于redis的安装

    下载redis 我这边下载redis4.0.1版本, 然后解压 然后执行yum -y install gcc gcc-c++ libstdc++-devel 然后cd //qbtapp/redis-4 ...

  3. python模块之os_sys_动态导入_包

    os模块: #!/usr/bin/env python # coding:utf-8 import os print(os.getcwd()) #获取当前工作目录,即当前python脚本工作的目录路径 ...

  4. LXC vs Docker

    https://www.sumologic.com/blog/code/lxc-lxd-explaining-linux-containers/ see also: https://linuxcont ...

  5. vi编辑器之删除操作

    参见 1.vi列删除 方法一: ctrl+v进入列编辑模式: 将光标定位子想要删除的起始列: 移动光标至结束列(直接通过移动光标选中,对列不对齐时,可能比较长的行,无法全部选中,尤其是需要一直删除到行 ...

  6. java接口深入

    1.抽象类. java常规类中,有些方法并不是固定的,而是在不同的情况下有不同的实现的,比如一个人,在公司要工作,在学校要学习,在食堂要吃饭,但是这个人还有相同的地方,比如不论在哪里都要呼吸,看,挺, ...

  7. PHP 解决ueditor兼容问题

    默认情况下,ueditor的内容通过PHP导入到DB中,会将内容中的html进行转义操作,此时读取显示就会有问题 step 1: $content = htmlspecialchars_decode( ...

  8. 部署Qt应用时候报错0xc000007b

    情况: 在开发环境可以运行,部署到其他电脑无法运行: 排错:百度.谷歌了很多方法不行,后来发现添加了Qt\5.11.0\mingw53_32\bin环境变量,程序执行正常,去掉就报错:猜测估计是dll ...

  9. String 和 StringBuilder

    官方解释 String  String 类代表字符串.字符串是常量:它们的值在创建之后不能更改. StringBuilder 一个可变的字符序列. 疑问 字符串是常量:它们的值在创建之后不能更改.那 ...

  10. Linux中访问Apache报403错误处理方法

    1.先说本地环境,脱离基础环境的解决策略都是耍流氓 (1)Linux:CentOS7.5 (2)Apache: Apache/2.4.6 (CentOS) (3)Apache的安装路径在 /usr/l ...