本文主要介绍了mysql+ssm+ajax上传图片问题。具有很好的参考价值。下面跟着小编一起来看下吧
第一次写上传图片的代码,碰到很多问题。昨天做了整整一天,终于在晚上的时候成功了。大声欢呼。
但是,做完之后,还是有很多问题想不通。所以在这里也算是写个笔记,日后忘记了可以回顾,也算请教各路朋友。(^_^)
q.1. 网上说ajax不能上传文件,但是这个说法并不是很多,也还是有蛮多通过ajax上传文件的分享。
我也没有通过ajax做出来,最后是通过ajaxsubmit这个方法写的。
q.2. ajaxsubmit这个方法对文件上传的大小有默认限制吧。我选择大于100kb的文件上传就不能成功,小于100kb的就可以成功。
上传大于100kb的时候,浏览器console返回下面的提示。说明他还是执行了ajaxsubmit的success方法,并返回textstatus的值为success,但是xmlhttprequest, 和 errorthrown的responsetext返回的html代码内容是我在spring-web.xml配置的异常处理视图网页。
js代码(提交表单事件):
function postimg(){
if ($.trim($("#imgfile").val()) == "") {
alert("请选择图片!");
return;
}
console.log($("#imgfile")[0].files[0].size);//小于100*1024,下面的请求就可以成功
var option = {
url : '/cloudnote/user/insertuserphoto.do',
type : 'post',
// datatype : 'json',
headers : {"clientcallmode" : "ajax"}, //添加请求头部
success : function(xmlhttprequest, textstatus, errorthrown){
console.log(xmlhttprequest);
console.log(textstatus);
console.log(errorthrown);
console.log("前端输出上传成功");
$("#imgclose").click();
},
error: function(xmlhttprequest, textstatus, errorthrown) {
console.log(xmlhttprequest);
console.log(textstatus);
console.log(errorthrown);
console.log("前端输出上传失败");
}
};
$("#imgform").ajaxsubmit(option);
return false;
}
前端html表单:
<form id="imgform" >
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="mymodallabel">修改头像</h4>
</p>
<p class="modal-body">
<input type="file" id="imgfile" name="imgfile"/>
<input id="imgid" name="userid" value="${user.id }" style="display:none" />
</p>
<p class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="imgclose">关闭</button>
<button type="button" class="btn btn-primary" onclick="postimg();" id="imgsubmit">上传</button>
</p>
</p>
</form>
下面是后台的java代码(controller)
//更新用户头像
@requestmapping(value="/insertuserphoto.do",method = requestmethod.post)
public void insertuserphoto(
httpservletrequest req, httpservletresponse res){
system.out.println("----- 插入图片 -------");
try{
string id = req.getparameter("userid");
system.out.println(id);
multiparthttpservletrequest multipartrequest = (multiparthttpservletrequest) req;
multipartfile file = multipartrequest.getfile("imgfile");
byte[] photo = file.getbytes();
boolean result = serv.insertuserphoto(id, photo);
res.setcontenttype("text/html;charset=utf8");
res.getwriter().write("result:" + result);
}catch(exception e){
e.printstacktrace();
}
system.out.println("----- 插入图片end -------");
}
/**
* 读取用户头像
* @param req
* @param res
*/
@requestmapping(value="/readphoto.do", method=requestmethod.get)
public void readphoto(httpservletrequest req, httpservletresponse res){
system.out.println("------readpohto-----");
string id = utils.getsessionuserid(req);
try {
user user = serv.selectuserphoto(id);
res.setcontenttype("image/jpeg");
res.setcharacterencoding("utf-8");
outputstream outputstream = res.getoutputstream();
inputstream in = new bytearrayinputstream(user.getphoto());
int len = 0;
byte[] buf = new byte[1024];
while((len = in.read(buf,0,1024)) != -1){
outputstream.write(buf, 0, len);
}
outputstream.close();
} catch (ioexception e) {
e.printstacktrace();
}
system.out.println("-----readpohto end-----");
return;
}
service实现类
//查找用户图片(头像)
public user selectuserphoto(string id) throws imageexception {
user user = userdao.finduserbyid(id);
if(user == null){
throw new usernameexception("用户名不存在!");
}
map<string, object> data = userdao.selectuserphoto(id);
system.out.println(data);
user.setphoto((byte[]) data.get("photo"));
return user;
}
//更新用户图片(头像)
public boolean insertuserphoto(string userid, byte[] photo) throws imageexception, usernameexception {
if(userid == null || userid.trim().isempty()){
throw new usernameexception("用户id不存在");
}
user user = userdao.finduserbyid(userid);
if(user == null){
throw new usernameexception("用户不存在");
}
user.setphoto(photo);
int n = userdao.updateuserphoto(user);
system.out.println("插入图片:" + n);
return n==1?true:false;
}
实体类user的photo 是 byte[] 类型的;
数据库的photo是 longblob:
mapper映射器:
<!-- 更新图片 -->
<update id="updateuserphoto" parametertype="cn.tedu.note.entity.user">
update user set id = #{id}, photo = #{photo,jdbctype=blob} <!-- 这里试了,如果不加jdbctype=blob 会出错,虽然不是很理解,但也照做了 -->
where id = #{id}
</update>
<!-- 获取图片 -->
<select id="selectuserphoto" parametertype="string" resulttype="map">
select id as id, photo as photo from user
where id=#{id}
</select>
spring-web.xml配置
<!-- 文件上传表单的视图解析器 -->
<bean id="multipartresolver" class="org.springframework.web.multipart.commons.commonsmultipartresolver">
<property name="maxuploadsize"><value>100000</value></property>
<property name="defaultencoding"><value>utf-8</value></property>
</bean>
以上就是mysql+ssm+ajax上传图片问题的分析(图)的详细内容。