html代码:
说明:隐藏的input框可以不需要,因为我是要在别的地方用到所以添加的隐藏input框
<!--流程图上传的表单 -->
<form name="dateupload" method="post" enctype="multipart/form-data" id="ss">
<table width="80%" class="yewzn-tab" id="st">
<td width='12%' class='gi'>经办流程图:</td>
<td colspan="3">
<input type="file" name="file" id="fil">
<button type="button" οnclick="tijiao()" class="yewzn-but-change">提交</button>
<input name="flowChart" type="hidden" id="sql2">
</td>
</table>
</form>
js代码:
<script type="text/javascript">
//业务指南上传图片
function tijiao(){
var node = $("#businessTypeList").tree("getSelected");
if(node == null || node == ""){
$.messager.alert("提示", "没有选择业务类型,无法上传文件!", "info");
}else{
var form = new FormData(document.getElementById("ss"));
$.ajax({
url : '${pageContext.request.contextPath}/businessGuide/insertImg.jt?id='+node.id,
data : form,
type : 'post',
processData:false,
contentType:false,
success : function(data){
var data = JSON.parse(data);
if(data.b==true){
$("#sql1").val(data.desc);
$("#sql2").val(data.desc);
//上传时回显图片
$("#deli").show();
$("#flowChartDiv").html("<img src='${pageContext.request.contextPath}/"+data.desc+"' style='width:200px; height:200px;'></img>");
//$.messager.alert("提示","图片上传成功!");
}else if(data.b==false){
$.messager.alert("提示",data.desc);
}
},
error : function(data){
$.messager.alert("提示",data.error);
}
});
}
}
</script>
后台代码:
1:自定义文件大小判断,文件格式判断。(因为前端页面显示时无法显示小写后缀,所以将后缀全部改为大写格式):
2:返回的值由自己控制,传文件名或者路径都可以。
@RequestMapping(value="/insertImg",method=RequestMethod.POST,produces="text/html;charset=UTF-8")
@ResponseBody
public String insertImg(String id,MultipartFile file, HttpServletRequest request) throws Exception, IOException{
//定义图片的大小不能超过2M
long maxSize = 1024*1024*2;
//判断文件大小
long fileSize = file.getSize();
if(fileSize > maxSize) {
return JsonString.returnJsonFalse("图片大小不能超过2M,请确认大小后重新上传!");
}else {
//获取文件存贮的路径
ServletContext context = request.getSession().getServletContext();
//设定指定存储文件的位置
String newPath = context.getRealPath("/images");
//获取文件的原始名称
String fileName = file.getOriginalFilename();
//获得文件后缀, 将后缀名改为大写
int i = fileName.lastIndexOf(".");
String tt = fileName.substring(i+1).toUpperCase();
System.out.println(tt);
//判断是否是图片格式
if(!tt.equals("PNG") && !tt.equals("JPG") && !tt.equals("BMP") && !tt.equals("JPEG") && !tt.equals("GIF")) {
return JsonString.returnJsonFalse("上传图片格式不正确,请确认上传文件是否是图片格式!");
}
//获得新的文件名
String newFileName = DateUtils.getCurrentDate()+"."+tt;
String sqlPath = "images/"+newFileName;
//保存路径到数据库中(通过业务类型id)
businessGuideMapper.updateFlowChartById(sqlPath,id);
File dir = new File(newPath,newFileName);
if(!dir.exists()){
dir.mkdirs();
}
//MultipartFile自带的解析方法
file.transferTo(dir);
//返回插入图片的相对路径,并保存到另外一个form表单中
return JsonString.returnJsonTrue(sqlPath);
}
}