`
wanggeying
  • 浏览: 66501 次
  • 性别: 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
分享到:
评论

相关推荐

    springboot+vue实现超大文件分片极速上传与下载完整前后端源码

    在本项目中,"springboot+vue实现超大文件分片极速上传与下载完整前后端源码",我们看到了一个采用现代Web技术构建的高效文件管理系统。这个系统利用了SpringBoot后端框架和Vue.js前端框架的优势,为处理大文件上传...

    前后端分离的网上银行管理系统源码+项目说明+示例图片(实现登录、账户管理、贷款页面、交流平台功能).zip

    1、该资源内项目代码都是经过测试运行成功,功能正常的情况下才上传的,请放心下载使用。 2、适用人群:主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等...

    vue+springboot图片上传和显示的示例代码

    在本文中,我们将深入探讨如何实现一个基于Vue和...这个示例代码为开发者提供了一个完整的流程,帮助他们理解和实现图片上传与显示功能,对于需要在前后端分离项目中集成此类功能的开发人员来说,是非常有价值的参考。

    ajax+ashx完整上传图片示例,可回显

    在Web开发中,图片上传是一项常见的功能,而Ajax技术与ASHX(HTTP Handler)结合可以实现异步无刷新的图片上传,并且支持...这是一个典型的前后端交互案例,对于理解Web开发中的图片上传和数据交互有很好的参考价值。

    ueditor java开发前后端分离 后端代码

    ueditor是一款流行的富文本编辑器,广泛应用于网页内容编辑场景,它提供了丰富的文本格式化、图片上传、表格处理等功能。在Java环境下,前后端分离的开发模式已经成为现代Web应用的标准架构,能够有效提高开发效率和...

    实现图片预览功能

    在IT行业中,图片预览是一项常见且重要的功能,尤其在网页和应用程序中。它允许用户在不实际下载或打开文件的情况下查看图片内容,提升了用户体验。本文将深入探讨如何实现这一功能,包括前端和后端的技术实现。 ...

    百度UEditor 1.3.6 net版 图片上传功能

    UEditor 1.3.6是其某个稳定版本,其中包含了丰富的功能,特别是图片上传功能,对于提升用户体验具有重要意义。 ### 图片上传功能详解 1. **图片上传接口**:UEditor 1.3.6支持用户在编辑过程中直接上传本地图片到...

    图片上传下载ajax异步操作前后台代码-demo

    本示例"图片上传下载ajax异步操作前后台代码-demo"提供了完整的解决方案,允许用户通过Ajax技术实现图片的上传和下载,同时包含了对手机号码、身份证等常见输入的验证。以下是关于这个项目的详细知识点: 1. **Ajax...

    wangEditor上传图片 demo

    【wangEditor上传图片 demo】是一个基于wangEditor富文本编辑器的图片上传功能示例,它展示了如何在前端使用wangEditor并结合后端Java代码实现图片的上传与展示。这个demo适用于那些想要在Web应用中集成图片上传功能...

    C#编写的海康威视前后端人脸库管理和图片上传软件(含代码)

    (相关人脸库管理和图片上传功能需要使用XML语言命令实现,示例中仅有创建人脸库功能指令,如不想自行开发本人园区访客系统资源中有完整该功能) 2.具备海康威视设备通道设置、网络设置、移动侦查设置、系统设置等...

    利用jquery插件的图片剪切上传功能

    标题中的“利用jquery插件的图片剪切上传功能”指的是在网页中实现用户可以选取图片、剪切并上传的功能,这种功能通常用于个人头像设置、产品图片上传等场景。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档...

    Leancloud BaaS Demo,前后端全包.zip

    《 Leancloud BaaS 整合应用开发实战:iOS 前后端完整示例解析》 在移动应用开发中,后端服务的搭建往往需要大量的时间和精力,这对于专注于用户界面和用户体验的开发者来说是一个挑战。Leancloud 提供的 Backend-...

    移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

    该功能主要针对移动端用户,提供了便捷的图片上传、压缩及旋转处理。以下是一些相关知识点: 1. Vue.js框架:Vue是一套用于构建用户界面的渐进式JavaScript框架,主要用于开发单页面应用程序(SPA)。它允许开发者...

    H5实现多图片预览上传,可点击可拖拽

    本文将深入探讨如何使用H5实现多图片预览、上传功能,并支持点击和拖拽操作,同时保持界面的美观和接口的简洁性。在图片上传控件的设计中,用户体验和功能实现是两...因此,一个完整的图片上传系统是前后端协作的结果。

    移动web图片上传

    在移动Web开发中,图片上传是一项常见的功能,它允许用户通过手机浏览器选择并发送本地图片到服务器。这个过程涉及到前端和后端的交互,并且为了提供良好的用户体验,通常需要显示上传进度条。以下是对这个主题的...

    图片上传,html页面,本地预览,后台前台页面代码都有

    在IT领域,图片上传功能是网站和应用中常见的需求,特别是在社交媒体、博客系统或电子商务平台。...通过这样的实践,开发者可以更好地理解前后端协作处理文件上传的整个流程,从而在实际项目中更有效地实现类似功能。

    介绍如何应用ExtJs进行前后台的数据交互

    它提供了一整套组件、数据绑定机制和事件处理系统,使得开发者能够创建功能丰富的、交互式的用户界面。在前后台数据交互中,ExtJs 起着至关重要的作用,它可以与服务器端进行异步通信,实现数据的获取、更新、删除等...

    kindeditor上传图片Demo

    这个"kindeditor上传图片Demo"是一个示例项目,旨在演示如何在KindEditor中集成图片上传功能。在开发过程中,开发者可能会遇到各种问题,比如权限设置、服务器端处理、前端交互等。在这个Demo中,作者可能已经解决了...

    layui图片上传.net 后端

    9. 示例项目`UploadImageDemo`:这个压缩包中的项目可能包含了完整的前后端代码示例,包括layui前端页面、ASP.NET后端控制器、FTP上传逻辑以及数据库交互的代码。通过分析和运行这个示例,开发者可以快速理解并实现...

Global site tag (gtag.js) - Google Analytics