图片上传回显,并以clob数据类型存入数据库

照片本地上传回显以及Oracle数据库保存:
1.jsp页面图片加载代码

<div>
	<img src="./images/none.jpg" height="140px" width="100%"
		id="tp1" readonly="readonly">
	<input id="upload" name="file"
		style="width: 100px; display: none;" class="form-control"
		accept="image/*" type="file" />
	<input type="hidden" name="VGrtp" id="VGrtp"
		class="form-control" />
</div>

2.回显js代码:
(1.)全局变量定义

var url1=window.URL;
var tpxx1;

(2.)初始加载方法

//图片显示事件
	jQuery('#tp1').click(function () { 
		jQuery("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传 
		jQuery("#upload").bind("change",function(){ 
			var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径 
			if (objUrl) {jQuery("#tp1").attr("src", objUrl) ; //将图片路径存入src中，显示出图片 
			} 
		});
		var input = document.getElementById("upload");
		readimg1(input,tpxx1);
	}); 

(3.)图片处理方法

// 图片处理方法
function getObjectURL(file) { 
	if (window.createObjectURL!=undefined) { // basic 
		url = window.createObjectURL(file) ; 
	} else if (window.URL!=undefined) { // mozilla(firefox) 
		url = url1.createObjectURL(file) ; 
	} else if (window.webkitURL!=undefined) { // webkit or chrome 
		url = window.webkitURL.createObjectURL(file) ; 
	} 
	return url ; 
}
function readimg1(input,tpxx){
	if(typeof FileReader==='undefined'){
		alert("抱歉，你的浏览器不支持 FileReader");
		input.setAttribute('disabled','disabled');
	}else{
		input.addEventListener('change',readFile1,false);
	}
	function readFile1(){
		var file = this.files[0];
		if(!/image\/\w+/.test(file.type)){
			alert("文件必须为图片！");
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e){
			dealImage(this.result,{width:148},function(base){//执行压缩方法
				document.getElementById('tp1').setAttribute('src',base);//将压缩之后的数据添加给pic2
				tpxx1=base;
				console.log(tpxx1);
			});
		} 
	}
}
/**
 * 图片压缩，默认同比例压缩
 * @param {Object} path
 * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 * obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 * 回调函数有一个参数，base64的字符串数据
 */
function dealImage(path, obj, callback){
	var img = new Image();
	img.src = path;
	img.onload = function(){
		var that = this;
		// 默认按比例压缩
		var w = that.width,
		h = that.height,
		scale = w / h;
		w = obj.width || w;
		h = obj.height|| (w / scale);
		var quality = 0.7; // 默认图片质量为0.7
		//生成canvas
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		// 创建属性节点
		var anw = document.createAttribute("width");
		anw.nodeValue = w;
		var anh = document.createAttribute("height");
		anh.nodeValue = h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);
		ctx.drawImage(that, 0, 0, w, h);
		// 图像质量
		if(obj.quality && obj.quality <= 1 && obj.quality > 0){
			quality = obj.quality;
		}
		// quality值越小，所绘制出的图像越模糊
		var base64 = canvas.toDataURL('image/jpeg', quality );
		// 回调函数返回base64的值
		callback(base64);
	}
}

上面的tpxx1是经过解析后的图片信息,例子:(data:image/jpeg;base64,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) 可以直接以clob的数据类型在数据库中存储.