jsp页面代码:

设备图片

js如下：

/*****读取图片 start******/

var imgFile = "";

$("#imagefile").live('change',function(){

if(typeof FileReader=='undifined') { //判断浏览器是否支持filereader

var result=document.getElementById("result");

result.innerHTML="

抱歉，你的浏览器不支持 FileReader

";

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='';

}

}

});

/*****读取图片 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 ? "上传成功" : "上传失败"

}

}