JavaWeb项目 js图片上传到Oracle转为base64存入数据库

Posted 2020-11-07 aliqingge

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+‘" />‘;

　　　　}

　　}

});

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

}