共用的上传页面:
<form action="/restaurant/uploadAvatar/file" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="hidden" name="callback" value="${(callback)!''}"/>
<input type="submit" value="上传" />
<div>仅支持jpg,bmg,png,gif格式上传</div>
</form>
引用共用上传页面的模板页(使用iframe:)通过js引用上面的页面
<div class="form-group">
<div class="col-md-2 control-label"><label for="form_newPassword" class="required">头像</label></div>
<div class="col-md-8 controls">
<img src="${(user.avatar)!''}" id="user_preview_img" /><br/>
<input type="text" value="${(tg_content_txt)!''}" name="tg_content_txt" style="width:120px" />
<input type="button" class="btn btn-success" value="上传图片" uimg="parent.input[name=tg_content_txt]" />
</div>
</div>
使用引用的js代码如下:
$.uimg = {
draw: function(node){
var uimg = $(node);
$.uimg.make_iframe(uimg);
uimg.bind("click.uimg", function(){
var uimg = $(this);
var file = this.uiframe.contents().find("input[type=file]");
file.bind("change", function(){
$.uimg_node = uimg;
file.parents("form:first").submit();
});
file.click();
});
},
callback: function(status,text,url){
var input_class = $.uimg_node.attr("uimg");
var input = null;
if (input_class.indexOf("parent.")==0){
input = $.uimg_node.parent().find(input_class.replace("parent.", ""));
} else {
input = $(input_class);
}
input.val(url);
$("#imglink").append("<img src='"+url+"' width='500' height='200'/>");
$("#user_preview_img").attr("src", url);
$("#user_preview_img").css("display", "block");
//$("a#piclink").attr("href", url);
//window.parent.alertMsg.correct('上传成功');
////jcrop头像裁剪
//恢复form
$.uimg.make_iframe($.uimg_node);
},
make_iframe: function(uimg){
try{$(uimg)[0].uiframe.remove();}catch(e){}
var url = "http://localhost:8080/restaurant/uploadAvatar?callback=parent.jQuery.uimg.callback";
var iframe = $("<iframe class='uimg_iframe' style='display:none'></iframe>");
iframe.attr("src", url);
iframe.attr("frameborder", 0);
//iframe.attr("width", 0);
//iframe.attr("height", 0);
$(top.document.body).append(iframe);
$(uimg)[0].uiframe = iframe;
}
}
$.fn.uimg = function() {
$.uimg.draw(this);
}
页面中使用的js如下:
<script>
setTimeout(function(){
$("input[name=tg_position]").each(function(){
if ($(this).val()=="${(tg_position)!''}") {
$(this).attr("checked", "1");
}
});
var tg_content = "${(tg_content)!''}";
tg_content_type = tg_content.substring(0, tg_content.indexOf(":"));
tg_content_txt = tg_content.substring(tg_content.indexOf(":")+1);
$("input[name=tg_content_type][value="+tg_content_type+"]").attr("checked", "1");
$("input[uimg]").uimg();
},50);
function init_tg_content(o){
var type = $(o).find("input[name=tg_content_type]:checked").val();
var txt = $(o).find("input[name=tg_content_txt]").val();
$(o).find("input[name=tg_content]").val(type+":"+txt);
return true;
}
</script>
js请求的url所执行的方法:
///js回调语句 post进来的url
@RequestMapping(value="/uploadAvatar",method = {RequestMethod.GET,RequestMethod.POST})
public ModelAndView uploadimages(HttpServletRequest request,HttpServletResponse response){
ModelAndView mav=new ModelAndView();
String callback=request.getParameter("callback");
System.out.println("----"+callback);
mav.addObject("callback", callback);
mav.setViewName("/app/uploadAvatar");
return mav;
}
共用页面请求的路径,所执行的上传图片函数:
///ifreame引用的post过来的url(即iframe包含的通用的一个上传页面)
@RequestMapping(value="/uploadAvatar/file",method = {RequestMethod.GET,RequestMethod.POST})
public String uploadImages(@RequestParam(value = "file", required = false) MultipartFile file,
HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("text/html,charset=UTF-8");
PrintWriter out=response.getWriter();
ModelAndView mav =new ModelAndView();
String path = request.getSession().getServletContext().getRealPath("/resources/images/uploadAvatar/");
String fileName = file.getOriginalFilename();
String type=fileName.substring(fileName.lastIndexOf("."),fileName.length());
SimpleDateFormat sdFormat=new SimpleDateFormat("yyyyMMddhhmmss");
String name=sdFormat.format(new Date());
fileName=name+type;
System.out.println("---"+type);
// String fileName = new Date().getTime()+".jpg";
System.out.println("path"+path);
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//锟斤拷锟斤拷
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
//model.addAttribute("fileUrl", request.getContextPath()+"/uploadImages/"+fileName);
ImgUploadHandle uimg=new ImgUploadHandle();
String outputDir1=path+"/avatar01/";
String urlPath=path+"/";
System.out.println("gggggg"+urlPath);
uimg.compressPic(urlPath, outputDir1, fileName, fileName, 140, 140, false);
//uimg.compressPic(urlPath, "e:\\", fileName, fileName, 400, 230, false);
//System.out.println("输入的图片大小:" + uimg.getPicSize(path+"/"+fileName)/1024 + "KB");
// System.out.println("com");
mav.addObject("fileUrl", request.getContextPath()+"/resources/images/uploadAvatar/"+fileName);
mav.setViewName("/upload/uploadSuccess");
String urlString=request.getContextPath()+"/resources/images/uploadAvatar/avatar01/";
System.out.println("==="+urlString);
String callback=request.getParameter("callback");
System.out.println("-+++---"+callback);
StringBuilder sb = new StringBuilder();
sb.append("<script>parent.jQuery.uimg.callback(true, '', 'http://localhost:8080"+urlString+""+fileName+"');</script>");
out.print(sb);
return null;
}
执行上传函数后,返回相关参数到js,js执行回调函数,用户可以预览到自己上传的图片
分享到:
相关推荐
JAVA WEB 校园订餐系统项目源码+数据库 JAVA WEB 校园订餐系统项目源码+数据库 JAVA WEB 校园订餐系统项目源码+数据库 JAVA WEB 校园订餐系统项目源码+数据库 JAVA WEB 校园订餐系统项目源码+数据库 JAVA WEB 校园...
python+flask微信小程序订餐系统源码 python+flask微信小程序订餐系统源码python+flask微信小程序订餐系统源码 python+flask微信小程序订餐系统源码python+flask微信小程序订餐系统源码 ...
在线订餐系统(挺好的)在线订餐系统(挺好的)在线订餐系统(挺好的)在线订餐系统(挺好的)在线订餐系统(挺好的)
外卖网上订餐系统的设计与实现项目可行性研究报告.pdf外卖网上订餐系统的设计与实现项目可行性研究报告.pdf外卖网上订餐系统的设计与实现项目可行性研究报告.pdf外卖网上订餐系统的设计与实现项目可行性研究报告.pdf...
基于uml的网上订餐系统的开发文档 第1章 绪 论 - 4 - 1.1 系统开发的背景和意义 - 4 - 1.2 国内外研究发展现状 - 4 - 1.2.1 面向对象技术的发展与现状 - 4 - 1.2.2 UML的建模语言 - 5 - 1.2.3 UML的应用领域 - 6 - ...
“基于Android的在线订餐系统的研究与实现”项目由三个模块组成:WEB服务器,Android用户客户端和Android管理员客户端。 WEB服务器 “OrderServer”的部署有两种方法: 1、通过MyEclipse或者Eclipse直接部署,服务器...
PHP校园订餐系统PHP校园订餐系统PHP校园订餐系统PHP校园订餐系统
本文档从编程人员编写代码开始就能使用,在用户登录系统、用户订餐系统、会员管理系统、订餐信息处理系统、菜式管理系统、系统用户管理系统等六大模块中均适用,在每一个模块都必须进行单元测试,到软件完整开发出来...
基于系统开发的软件工程规范的需要,本人严格执行需求分析,概要设计,详细设计与编码以及系统设计等设计步骤来完成该系统,并且在系统开发过程中结合理论知识与开发技术,完成了网上订餐系统平台的构建,实现预期的...
asp+网上订餐系统 有送餐地址的过虑程序
软件工程 网上订餐系统 UML图,方便让你在设计网上订餐系统web时对相关的需求分析有明确的认识 而且对您在用软件工程方式设计UML图时有详细的流程。
基于javaweb的企业内部员工订餐系统源码+数据库.zip基于javaweb的企业内部员工订餐系统源码+数据库.zip基于javaweb的企业内部员工订餐系统源码+数据库.zip基于javaweb的企业内部员工订餐系统源码+数据库.zip基于...
基于SpringBoot的校园网上订餐系统源码+数据库脚本(毕业设计) 、已获导师指导并通过的高分项目。 项目简介 本项目是一套基于SpringBoot的校园网上订餐系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战...
网上订餐系统需求分析
基于SpringBoot的校园网上订餐系统源码+数据库+毕业设计。已获高分通过项目。 项目简介 本项目是一套基于SpringBoot的校园网上订餐系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。...
学生可以对自己的订餐记录进行查看。商家模块主要是对菜品的基本信息维护管理,对用户的订单进行查看和配送。管理员模块实现对学生、商家、菜品进行维护和管理。系统的应用为在校学生的订餐提供了方便,为商家扩展了...
网上订餐-网上订餐系统-网上订餐系统源码-网上订餐管理系统-网上订餐管理系统java代码-网上订餐系统设计与实现-基于springboot的网上订餐系统-基于Web的网上订餐系统设计与实现-网上订餐网站-网上订餐网站代码-网上...
基于SpringCloud的在线校园订餐系统源码+数据库(毕业设计).zip。项目简介 本项目是一套基于SpringCloud的在线校园订餐系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。也可作为...