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

GIN · 发表于 2013-10-23 15:23:57

本帖最后由 GIN 于 2013-10-23 15:36 编辑

jeecg 文件上传，相信让很多人头痛吧？

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

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

step.1
新建一个文件上传的jsp页面，作为通用上传。
路径：/webpage/system/upload/uploadView.jsp
代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html >
<html>
<head>
<t:base type="jquery,easyui,tools"></t:base>
<script type="text/javascript">
function uploadSuccess(d,file,response){
$("#fileUrl").val(d.attributes.url);
$("#fileName").val(d.attributes.name);
var url = $("#fileUrl").val();
var html="";
if(url.indexOf(".gif")!=-1 ||
url.indexOf(".jpg")!=-1 ||
url.indexOf(".png")!=-1 ||
url.indexOf(".bmp")!=-1){
html += "<img src='"+url+"' width =400 height=300 />";
}else{
html += "<a href='"+url+"' target=_blank >下载:"+d.attributes.name+"</a>";
}
$("#fileShow").html(html);
}
function uploadCallback(callback){
var url = $("#fileUrl").val();
var name= $("#fileName").val();
callback(url,name);
}
</script>
</head>
<body style="overflow-y: hidden" scroll="no">
<table cellpadding="0" cellspacing="1" class="formtable">
<input id="documentTitle" type="hidden" name="documentTitle" value="blank"/>
<input id="fileUrl" type="hidden"/>
<input id="fileName" type="hidden"/>
<tbody>
<tr>
<td align="right">
<label class="Validform_label"></label>
</td>
<td class="value">
<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>
</td>
</tr>
<tr>
<td colspan="2" id="instructionfile" class="value">
</td>
</tr>
</tbody>
</table>
<div id="fileShow" >
</div>
</body>
</html>

复制代码

step.2
写一个通用的js方法，来调用这个文件上传窗口
可以写入curdtools.js中

function commonUpload(callback){
$.dialog({
content: "url:systemController.do?commonUpload",
lock : true,
title:"文件上传",
width:700,
height: 400,
parent:windowapi,
cache:false,
ok: function(){
var iframe = this.iframe.contentWindow;
iframe.uploadCallback(callback);
return true;
},
cancelVal: '关闭',
cancel: function(){
}
});
}

复制代码

step.3
在/src/jeecg/system/controller/core/SystemController.java 中添加弹出页面跳转的方法

/**
* 文件上传通用跳转
*
* @param icon
* @param req
* @return
*/
@RequestMapping(params = "commonUpload")
public ModelAndView commonUpload(HttpServletRequest req) {
return new ModelAndView("system/upload/uploadView");
}

复制代码

这样就大功告成了！
使用时只需要：

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

jueyue · 发表于 2013-10-23 22:13:03

顶起

duguyiren3476 · 发表于 2013-10-24 16:30:10

很好用，通用组件，原本打算自己实现file的...

wxqlandy · 发表于 2013-10-26 23:40:43

弹出窗口单独上传通用性比较好，支持！

liujie62588 · 发表于 2014-9-14 20:18:48

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

sombook · 发表于 2014-10-22 16:14:12

多个文件上传的时候，即 multi="true"的时候，怎么在全部上传完成后调用一个方法（function）？

guxuhuanew · 发表于 2015-1-13 21:55:27

很好，学习了

15922088451 · 发表于 2017-3-9 17:26:17

您好，为何我这边弹出上传对话框，点击浏览没有任何响应

zizhu365 · 发表于 2017-12-8 16:28:10

那如果用户上传了文件，但是表单没有提交，这样就会造成服务器文件冗余了。还有没有更好的解决方案，谢谢

离水的鱼 · 发表于 2018-4-25 11:08:16

请问我如果需要在一个列表展示已经上传的文件，并且附带下载功能该怎么处理