jsp页面代码:
<form name="form" id="form" method="post">
<span class="title-span">设备图片</span>
<input type="file" id="imagefile"/>
<input type="button" value="上传图片" onclick="saveImg('保存图片路径')"/>
<div name="result" id="result">
<!-- 这里用来显示图片结果-->
</div>
</form>
js如下：
/*****读取图片 start******/
var imgFile = "";
$("#imagefile").live('change',function(){
if(typeof FileReader=='undifined') { //判断浏览器是否支持filereader
var result=document.getElementById("result");
result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
return false;
}
imgFile = document.getElementById("imagefile").files[0];
if(!/image\/\w+/.test(imgFile.type)) {//判断获取的是否为图片文件
alert("请选择正确的图像文件");
var obj = document.getElementById('imagefile') ;
obj.outerHTML=obj.outerHTML;
return false;
}
if(imgFile != undefined ){
var reader=new FileReader();
reader.readAsDataURL(imgFile);
reader.onload=function(e) {
var result=document.getElementById("result");
result.innerHTML='<img style="width:100%;" src="'+this.result+'" alt=""/>';
}
}
});
/*****读取图片 end******/
/*****图片上传的方法******/
function saveImg(url) {
var formData = new FormData(); // 创建formData表单数据对象
formData.append("file", imgFile); // 文件对象
$.ajax({
url: url,
type: 'post',
data: formData,
processData : false,
contentType : false,
cache: false,
success: function (str) {
alert(str);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
}
/*****后台代码******/
@RequestMapping(value="/save", produces= "text/plain;charset=UTF-8")
@ResponseBody
public String saveEquipment(Equipment equipment,HttpServletRequest request) throws Exception{
/**先实例化一个文件解析器*/
CommonsMultipartResolver coMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
/**判断request请求中是否有文件上传*/
if (coMultipartResolver.isMultipart(request)) {
/**转换request*/
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
/**获得文件*/
MultipartFile file = multiRequest.getFile("file");
if (file != null) {
InputStream is = file.getInputStream();
byte[] nb = new byte[is.available()];
is.read(nb);
is.close();
Base64Encoder encoder = new Base64Encoder();
/**设置转为base64的图片*/
String encode = encoder.encode(nb).trim();
// 设置图片属性
equipment.setIcon(encode);
}else {
System.out.println("--------未选择文件-------");
}
// 调用持久层方法保存到数据库
result = equipmentService.insert(equipment);
return result ? "上传成功" : "上传失败"
}
}