图片上传功能,前后端完整示例

表结构字段类型:
SCZP BLOB

实体类对象:
	private byte[] sczp;


图片上传功能实现,伪代码如下:
jsp
						    <input type="file" id="browsefile" >
								<div class="images_show" id="images_show">
									上传图片预览区
									图片仅限JPG、PNG格式

									文件尺寸:532×400px

									文件大小:200K以内

								</div>



js
	      //多图上传 input file控件里指定multiple属性 e.target是dom类型
	      $("#u_browsefile").change(function(e){
	          for(var i=0;i<e.target.files.length;i++)
	            {
	              var file = e.target.files.item(i);
	             //允许文件MIME类型 也可以在input标签中指定accept属性
	             if(!(/^image\/.*$/i.test(file.type)))
	             {
	               continue;      //不是图片 就跳出这一次循环
	             }
	             //实例化FileReader API
	             var freader = new FileReader();
	             freader.readAsDataURL(file);
	             freader.onload=function(e)
	             {
	               u_imagestr=e.target.result;
	               var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';
	               $("#u_images_show").empty().append(img);
	             }
	            }
	        });

//保存
function create(){
	 var base = new Base64();  
	 var images=base.encode(imagestr);  
	 
	 var createparam = $('#createform').serializeArray();//返回json数据结构
	 var param=JSON.stringify(createparam);
	 
	 $.ajax({ 
         type:"post",
         data: {param:param,images:images},//传递slid值
         url:projectpath+"/certificate/cjjl/save.do",
         dataType:"text",
         async :false,
         success:function(data){ 
        	 //alert(data);
        	 location.reload();
         }
     })
}


controller
		certificateCjjl.setBk(bk);
		byte contentsz[] = Base64.decodeBase64(images);
		certificateCjjl.setSczp(contentsz);
		certificateCjjlService.insert(certificateCjjl);
//注意:引入的包是import org.apache.commons.codec.binary.Base64;

猜你喜欢

转载自yingyingsheji.iteye.com/blog/2434395
今日推荐