`
wanggeying
  • 浏览: 63250 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

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

    博客分类:
  • file
 
阅读更多
表结构字段类型:
SCZP BLOB

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


图片上传功能实现,伪代码如下:
jsp
<input type="file" id="u_browsefile" >
<div class="images_show" id="u_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;
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics