设为首页收藏本站

JEECG官方网站-企业级JAVA快速开发平台

 找回密码
 立即注册

关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 最新动态 - 技术支持 - 师徒架构班

JEECG最新版本下载 JEECG智能开发平台 - 显著提高开发效率 常见问题 - 入门视频 - 参与开源团队

商务 QQ: 3102411850、418799587 商务热线: 18611788525 客服电话: 010-84820955 官方邮箱: jeecg@sina.com

查看: 14522|回复: 7

JEECG通用文件上传-弹出式(觉得文件上传不好用的来看)

[复制链接]

11

主题

11

好友

1314

积分

版主

Rank: 10Rank: 10Rank: 10

JEECG团队成员

发表于 2013-10-23 15:23:57 |显示全部楼层
本帖最后由 GIN 于 2013-10-23 15:36 编辑

jeecg 文件上传,相信让很多人头痛吧?

首先是提交的方式,和表单一起提交,继承附件实体。
然后是多文件上传,样式冲突,各种各样的问题。

这里给一个比较通用的文件上传方案,还是基于uploadify标签。但是绝对好用!


step.1
新建一个文件上传的jsp页面,作为通用上传。
路径:/webpage/system/upload/uploadView.jsp
代码:
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@include file="/context/mytags.jsp"%>
  3. <!DOCTYPE html >
  4. <html>
  5. <head>
  6. <t:base type="jquery,easyui,tools"></t:base>
  7. <script type="text/javascript">

  8.         function uploadSuccess(d,file,response){
  9.                 $("#fileUrl").val(d.attributes.url);
  10.                 $("#fileName").val(d.attributes.name);
  11.                 var url = $("#fileUrl").val();
  12.                 var html="";
  13.                 if(url.indexOf(".gif")!=-1 ||
  14.                                 url.indexOf(".jpg")!=-1        ||
  15.                                 url.indexOf(".png")!=-1 ||
  16.                                 url.indexOf(".bmp")!=-1){
  17.                         html += "<img src='"+url+"' width =400 height=300 />";
  18.                 }else{
  19.                         html += "<a href='"+url+"' target=_blank >下载:"+d.attributes.name+"</a>";
  20.                 }
  21.                 $("#fileShow").html(html);
  22.         }
  23.         function uploadCallback(callback){
  24.                 var url = $("#fileUrl").val();
  25.                 var name= $("#fileName").val();
  26.                 callback(url,name);
  27.                
  28.         }
  29. </script>
  30. </head>
  31. <body style="overflow-y: hidden" scroll="no">
  32.   <table cellpadding="0" cellspacing="1" class="formtable">
  33.   <input id="documentTitle" type="hidden" name="documentTitle" value="blank"/>
  34.   <input id="fileUrl" type="hidden"/>
  35.   <input id="fileName" type="hidden"/>
  36.    <tbody>
  37.     <tr>
  38.      <td align="right">
  39.        <label class="Validform_label"></label>
  40.      </td>
  41.      <td class="value">
  42.       <t:upload name="instruction" dialog="false" multi="false" extend="pic" queueID="instructionfile" view="false" auto="true" uploader="systemController.do?saveFiles" onUploadSuccess="uploadSuccess"  id="instruction" formData="documentTitle"></t:upload>
  43.      </td>
  44.     </tr>
  45.     <tr>
  46.      <td colspan="2" id="instructionfile" class="value">
  47.      </td>
  48.     </tr>
  49.    </tbody>
  50.   </table>
  51.    <div id="fileShow" >
  52.   </div>
  53. </body>
  54. </html>
复制代码

step.2
写一个通用的js方法,来调用这个文件上传窗口
可以写入curdtools.js中
  1. function commonUpload(callback){
  2.          $.dialog({
  3.                         content: "url:systemController.do?commonUpload",
  4.                         lock : true,
  5.                         title:"文件上传",
  6.                         width:700,
  7.                         height: 400,
  8.                         parent:windowapi,
  9.                         cache:false,
  10.                     ok: function(){
  11.                             var iframe = this.iframe.contentWindow;
  12.                             iframe.uploadCallback(callback);
  13.                                 return true;
  14.                     },
  15.                     cancelVal: '关闭',
  16.                     cancel: function(){
  17.                     }
  18.                 });
  19. }
复制代码

step.3
在/src/jeecg/system/controller/core/SystemController.java 中添加弹出页面跳转的方法
  1. /**
  2.          * 文件上传通用跳转
  3.          *
  4.          * @param icon
  5.          * @param req
  6.          * @return
  7.          */
  8.         @RequestMapping(params = "commonUpload")
  9.         public ModelAndView commonUpload(HttpServletRequest req) {
  10.                 return new ModelAndView("system/upload/uploadView");
  11.         }
复制代码
这样就大功告成了!
使用时只需要:



QQ截图20131023152728.jpg


function uploadTaxRegImgCallBack(url,name){
                $("#taxRegImgView").attr('src',url);
                $("#taxRegImg").val(url);
        }


页面展现:
QQ截图20131023152119.jpg

选中文件后自动上传:
QQ截图20131023152130.jpg

点击确定后调用“自定义的回调函数”:uploadTaxRegImgCallBack
这时文件上传后的url 就填充到页面的控件去了
QQ截图20131023152827.jpg




QQ截图20131023152142.jpg
博客:zjfhw.iteye.com
OnlineCoding视频-招聘系统:http://pan.baidu.com/share/link? ... B%E7%BB%9F%E3%80%8B

36

主题

6

好友

796

积分

高级会员

Rank: 6Rank: 6

JEECG团队成员

发表于 2013-10-23 22:13:03 |显示全部楼层
顶起
每天奋斗一点点
Blog:我的Blog,欢迎光临
回复

使用道具 举报

1

主题

0

好友

18

积分

新手上路

Rank: 2

发表于 2013-10-24 16:30:10 |显示全部楼层
很好用,通用组件,原本打算自己实现file的...
回复

使用道具 举报

4

主题

0

好友

78

积分

注册会员

Rank: 3Rank: 3

发表于 2013-10-26 23:40:43 |显示全部楼层
弹出窗口单独上传通用性比较好,支持!
回复

使用道具 举报

0

主题

0

好友

40

积分

新手上路

Rank: 2

发表于 2014-9-14 20:18:48 |显示全部楼层
确实很好用,不过我在测试的时候遇到一个问题呀,就是弹出的文件选择框被前面的页面遮挡住了,不知道你们遇见了没?找了一下解决办法,如下:在 curdtools.js文件中的commonUpload函数中添加两个属性:
stack:true,// 对话框是否叠在其他对话框之上。默认为 true
zIndex:9999,//对话框的 z-index 值,一个整数,越大越在上面。默认 1000 这里设置一个大一点的数
回复

使用道具 举报

2

主题

0

好友

26

积分

新手上路

Rank: 2

发表于 2014-10-22 16:14:12 |显示全部楼层
多个文件上传的时候,即 multi="true"的时候,怎么在全部上传完成后调用一个方法(function)?
回复

使用道具 举报

0

主题

0

好友

40

积分

新手上路

Rank: 2

发表于 2015-1-13 21:55:27 |显示全部楼层
很好,学习了
回复

使用道具 举报

0

主题

0

好友

19

积分

新手上路

Rank: 2

发表于 2017-3-9 17:26:17 |显示全部楼层
您好,为何我这边弹出上传对话框,点击浏览没有任何响应
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|JEECG官方网站-企业级JAVA快速开发平台 ( 京ICP备12013567号-3 )  

GMT+8, 2017-11-21 21:47 , Processed in 2.253129 second(s), 23 queries , Gzip On, Memcache On.

JEECG Open Source

© 2001-2012 Comsenz Inc.

回顶部