EasyUI上传图片，前台预览，后台读取

背景

Spring MVC + EasyUI

前台上传图片，并预览

下面是jsp的内容，form表单

java
<form id="upload_form" enctype="multipart/form-data" action="upload_deal.do" method="post"><input class="easyui-filebox" style="width:300px" data-options='onChange:change_photo' id="file_upload" name="file_upload2"/><br/> <input type="submit" value="提交" /> <br/></form><div id="Imgdiv"><img id="Img" width="200px" height="200px"/></div>

对应调用JS如下

java
function change_photo(){PreviewImage($("input[name='file_upload2']")[0], 'Img', 'Imgdiv');}

其中PreviewImage方法是借用网上大神的代码，这里写链接内容

后台

首先要在Spring-servlet.xml中添加与文件上传相关的配置,这里的100000是图片大小（byte）

java
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="100000"/></bean>

Action部分

java
@Controller
public class PictureTest {@Resource HibernateTemplate hibernateTemplate;@RequestMapping("/upload_deal")public ModelAndView upload_deal(@RequestParam(value="file_upload", required=false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException{savePicture(file, request);//保存图片List<Picture> pics = (List<Picture>)hibernateTemplate.find("from Picture");ModelAndView mav = new ModelAndView();mav.addObject("photo", pics.get(0).getPhoto_path());mav.setViewName("/Test/showPicture");return mav;}//文件保存到服务器上protected void savePicture(MultipartFile file, HttpServletRequest request)throws IOException, FileNotFoundException {String ImagePath = request.getSession().getServletContext().getRealPath("/static/img");File targetfile = new File(ImagePath, file.getOriginalFilename());Date date = new Date(System.currentTimeMillis());if(targetfile.exists()){String[] s = file.getOriginalFilename().split("\\.");s[0] += date.getTime();targetfile = new File(ImagePath, s[0] + "." + s[1]);}InputStream ins = file.getInputStream();FileOutputStream fos = new FileOutputStream(targetfile);byte b[] = new byte[1024];int temp = 0;while((temp = ins.read(b)) != -1){fos.write(b, 0, temp);}fos.close();ins.close();}
}

注意这里的ModeAndView需要Import的包是org.springframework.web.servlet.ModelAndView;否则返回前台很有可能是404错误；

EasyUI上传图片，前台预览，后台读取相关推荐

本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
JavaScript上传图片及时预览
JavaScript上传图片及时预览 /*******************************正面图片上传预览开始****************************/ f ...
js上传图片进行预览
js上传图片进行预览上传图片经常遇到这样的问题,就是需要实现预览,由于浏览器的安全机制,不能直接读取本地文件,所以需要使用js绕一圈实现预览效果 HTML代码如下 <input type=&q ...
h5页面上传图片java_[Java教程]h5上传图片及预览_星空网
h5上传图片及预览 2016-04-22 0 第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需 ...
python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
javascript --- [FormData的使用] 文件上传进度条展示文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源使用express将pu ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列谷歌火狐等浏览器注意:不支持safari 插件使用说明: 1.必须引用jquery ...
ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
thinkphp5通过ajax上传图片并预览
thinkphp5通过ajax上传图片并预览一.具体需求如图所术: 二.html代码: 三.js代码四.控制器php代码: 一.具体需求如图所术: 二.html代码: <form class ...

EasyUI上传图片，前台预览，后台读取

背景

前台上传图片，并预览

后台

Action部分

EasyUI上传图片，前台预览，后台读取相关推荐

最新文章

热门文章