关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 更新日志 - 技术支持 - 招聘英才

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

商务QQ: 69893005、3102411850 商务热线(5*8小时): 010-64808099 官方邮箱: jeecgos@163.com

查看: 50279|回复: 9

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
发表于 2013-10-23 22:13:03 | 显示全部楼层
顶起
发表于 2013-10-24 16:30:10 | 显示全部楼层
很好用,通用组件,原本打算自己实现file的...
发表于 2013-10-26 23:40:43 | 显示全部楼层
弹出窗口单独上传通用性比较好,支持!
发表于 2014-9-14 20:18:48 | 显示全部楼层
确实很好用,不过我在测试的时候遇到一个问题呀,就是弹出的文件选择框被前面的页面遮挡住了,不知道你们遇见了没?找了一下解决办法,如下:在 curdtools.js文件中的commonUpload函数中添加两个属性:
stack:true,// 对话框是否叠在其他对话框之上。默认为 true
zIndex:9999,//对话框的 z-index 值,一个整数,越大越在上面。默认 1000 这里设置一个大一点的数
发表于 2014-10-22 16:14:12 | 显示全部楼层
多个文件上传的时候,即 multi="true"的时候,怎么在全部上传完成后调用一个方法(function)?
发表于 2015-1-13 21:55:27 | 显示全部楼层
很好,学习了
发表于 2017-3-9 17:26:17 | 显示全部楼层
您好,为何我这边弹出上传对话框,点击浏览没有任何响应
发表于 2017-12-8 16:28:10 | 显示全部楼层
那如果用户上传了文件,但是表单没有提交,这样就会造成服务器文件冗余了。还有没有更好的解决方案,谢谢
发表于 2018-4-25 11:08:16 | 显示全部楼层
请问我如果需要在一个列表展示已经上传的文件,并且附带下载功能该怎么处理
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表