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 ? "上傳成功" : "上傳失敗"
}
}