1.图片上传回显一般都是用成熟上传组件完成,直接套用即可,最近我做一个项目,没有现成组件可用,不过用js和java代码也可以实现图片上传与回显,这里就将我的上传回显完整的记录下来
2.项目中我用的ssm框架,这里做一个小demo,不想再搭一个框架,用的springboot,直接用springmvc的上传组件就可以完成后台代码,前台代码用的js
3.环境:
工具:myeclipse,jdk1.7,springboot ,用springboot因为方便,其他的也可以,但是用的是springmvc的上传组件,如果自己手动搭建的ssm框架需要配置上传组件,这里不贴出来代码,springboot的搭建可看我的上一篇博客
4.页面效果,就是一个上传按钮和一个图片框:springboot需要添加支持jsp的依赖才能访问jsp页面,具体配置很简单,这里不写
5.页面写法也很简单,就是一个input框和一个img标签,
5.1 springboot引入静态文件存放的位置可以自己配置,也可使用默认的配置,我使用的自定义配置,将文件具体路径贴出来
application.properties文件下配置:spring.resources.static-locations=classpath\:/public/
5.2 js的存放路径
6.前台js代码:需要注意的是我的回调函数data,因为用的是fastjson,返回的不是json对象,而是json的字符串,所以用到$.parseJSON(data)将字符串转换成json对象,如果用的不是fastjson而是杰克逊的json转换工具则不用这么写
7.后台代码,两个方法,一个上传,一个回显,我这里用fastjson将编码统一为utf-8,这样中文的图片名字不会出现乱码,也可以正常回显,如果没有设置统一编码,需要手动转码处理乱码.
7.1 后台上传方法
7.2 后台图片回显代码
8.页面效果:样式我没加,需要自己可以加
8.1 页面
8.2 选择文件
8.3 图片上传成功后回显
8.4 :图片存到本机磁盘
简单的一个上传回显,根据需求自行改造,样式也可以自己添加,另外实际开发中需要向数据库写入相应数据这里也没有写,根据需求自己补上就可以了
