多图片的上传及Java回调js();
js回调务必知道不仅仅是
$(document).ready(function (){
//loadData();
});
这个初始初始化的时候可以调用,而且在js中任意地方都可以直接用函数名调用申明的函数
<script type="text/javascript">
tt();
function tt() {
alert(221);
}
</script>
用name相同上传的缺点在于不能解决动态添加多个不同name文件上传的接收问题
(一)在一张图片的基础上():
基础:
1,配置好复杂文本(图片解析器)
2,form写成复杂提交模式
<form method="post"
action="<c:url value='/system/tbBasBed/update?navTabId=basBedNav&callbackType=closeCurrent'/>"
class="pageForm required-validate" enctype="multipart/form-data"
onsubmit="return iframeCallback(this,navTabAjaxDone);">
</form>
特殊:
3,input上传控件name相同
<label>上传图片:
</label> <span><input type="file"
style="width: 240px; border: none;" accept=".jpg,.gif,.png,.bmp"
name="picture" value="${vo.picture_address}"
onchange="previewImage(this,'preview','imghead')" /></span> <br>
<span><input type="file"
style="width: 240px; border: none;" accept=".jpg,.gif,.png,.bmp"
name="picture" value="${vo.picture_address}"
onchange="previewImage(this,'preview','imghead')" /></span> <br>
<div id="preview">
<img id="imghead"
src="${pageContext.request.contextPath}${vo.picture_address}"
alt="" style="cursor: pointer; width: 100%;" />
</div>
4,@controller接收改为"[]"数组模式(同名属性都是这样接收)
@RequestMapping(value = "/system/tbBasBed/update", method = RequestMethod.POST)
public ModelAndView insert(@RequestParam("picture") MultipartFile[] picture,TbBasBed basBed) throws IllegalStateException, IOException, EsteelException {
System.out.println("123456");
}
(二)不同的name(name依赖数据库动态拼接) 这中mvc接收参数的形式应用map
采用专门嵌套小form针对每个上传控件上传,并且通过java回调js将保存文件的信息回写到大的form的隐藏域,最终提交大的form达到提交所有信息,
内嵌form提交后的跳转页面同样是在内嵌form的位置
大的form:
<form method="post"
action="<c:url value='/system/tbBasBed/update?navTabId=basBedNav&callbackType=closeCurrent'/>"
class="pageForm required-validate" enctype="multipart/form-data"
onsubmit="return iframeCallback(this,navTabAjaxDone);">
<fieldset style="margin: auto;">
<legend>公司其他详细信息 </legend>
<c:forEach items="${mapGN}" var="GN">
<c:if test="${\"J\" ne GN.LOOKUP_TYPE && \"K\" ne GN.LOOKUP_TYPE}">
<dl name="affixGn" id="tr_N_${GN.LOOKUP_TYPE}" <c:if test="${voo.COMP_TYPE eq \"B\"}">style="display:none"</c:if> style="width: 100%;float: left;margin-bottom: 3px;">
<dt style="float: left;text-align:right;width: 40%;height:65px;" >
${GN.LOOKUP_NAME.split(",")[0]}号:
</dt>
<dd style="float: left;text-align:left;width: 40%;height:65px;" >
<input name="fjCode_N_${GN.LOOKUP_TYPE}" id="fjCode_N_${GN.LOOKUP_TYPE}" maxlength="18" size="20" class="input" onkeydown="if (event.keyCode==13)event.keyCode=9;" />
<c:if test="${!\"H\" eq GN.LOOKUP_TYPE}">
<font color="red"> *</font>
</c:if>
<span class="fieldTip" id="code_N_${GN.LOOKUP_TYPE}"></span>
</dd>
</dl>
</c:if>
<dl name="affixGn" id="tr_FJ_N_${GN.LOOKUP_TYPE}" <c:if test="${COMP_TYPE eq \"B\"}">style="display:none"</c:if> style="width: 100%;float: left;margin-bottom: 3px;">
<dt style="float: left;text-align:right;width: 40%;height:65px;" >
${GN.LOOKUP_NAME.split(",")[1]}
</dt>
<dd style="float: left;text-align:left;width: 60%;height:65px;">
//小的form
<iframe src="${pageContext.request.contextPath}/account/tbCusFirmChg/upload?fileType=PIC&callBackFunction=showLogoPic_N_${GN.LOOKUP_TYPE}" width="300" height="25" frameborder="no" border="0" marginwidth="0" marginheight="0" SCROLLING="no"></iframe>
<font color="red"><c:if test="${\"J\" eq GN.LOOKUP_TYPE || \"K\" eq GN.LOOKUP_TYPE}">*</c:if> </font>
<font color="blue">(不大于6KGN) 允许上传6格式文件</font>
<input type="hidden" name="zjInfo_N_${GN.LOOKUP_TYPE}" id="zjvalue_N_${GN.LOOKUP_TYPE}" />
<span id="demoLogoPicTd_N_${GN.LOOKUP_TYPE}" style="display:none">
<img id="demoLogoPicObj_N_${GN.LOOKUP_TYPE}" src="#" height="60">
</span>
<script language="javascript">
function showLogoPic_N_${GN.LOOKUP_TYPE}(filePath,httpFolder,httpUrl){
showLogoPic("${GN.LOOKUP_TYPE}",filePath,httpFolder,httpUrl,"N");
}
</script>
</dd>
</dl>
</c:forEach>
<c:forEach items="${mapGW}" var="GW" >
<c:if test="${\"J\" ne GW.LOOKUP_TYPE && \"K\" ne GW.LOOKUP_TYPE}">
<dl name="affixGw" <c:if test="${voo.COMP_TYPE eq \"A\"}">style="display:none"</c:if> style="width: 100%;float: left;margin-bottom: 3px;">
<dt style="float: left;text-align:right;width: 40%;height:65px;">
${GW.LOOKUP_NAME}号:
</dt>
<dd style="float: left;text-align:left;width: 60%;height:65px;">
<input name="fjCode_W_${GW.LOOKUP_TYPE}" id="fjCode_W_${GW.LOOKUP_TYPE}" maxlength="18" size="20" class="input" onkeydown="if (event.keyCode==13)event.keyCode=9;" />
<c:if test="${!\"M\" eq GW.LOOKUP_TYPE && !\"N\" eq GW.LOOKUP_TYPE}">
<font color="red"> *</font>
</c:if>
<span class="fieldTip" id="code_W_${GW.LOOKUP_TYPE}"></span>
</dd>
</dl>
</c:if>
<dl name="affixGw" <c:if test="${voo.COMP_TYPE eq \"A\"}">style="display:none"</c:if> style="width: 100%;float: left;margin-bottom: 3px;">
<dt style="float: left;text-align:right;width: 40%;height:65px;">
${GW.LOOKUP_NAME}:
</dt>
<dd style="float: left;text-align:left;width: 40%;height:65px;" >
<iframe src="${pageContext.request.contextPath}/account/tbCusFirmChg/upload?fileType=PIC&callBackFunction=showLogoPic_W_${GW.LOOKUP_TYPE}" width="300" height="25" frameborder="no" border="0" marginwidth="0" marginheight="0" SCROLLING="no"></iframe>
<font color="red"><c:if test="${\"J\" eq GW.LOOKUP_TYPE || \"K\" eq GW.LOOKUP_TYPE}">*</c:if> </font>
<font color="blue">(不大于6KGW) 允许上传6格式文件</font>
<input type="hidden" name="zjInfo_W_${GW.LOOKUP_TYPE}" id="zjvalue_W_${GW.LOOKUP_TYPE}" />
<span id="demoLogoPicTd_W_${GW.LOOKUP_TYPE}" style="display:none">
<img id="demoLogoPicObj_W_${GW.LOOKUP_TYPE}" src="#" height="60">
</span>
<script language="javascript">
function showLogoPic_W_${GW.LOOKUP_TYPE}(filePath,httpFolder,httpUrl){
showLogoPic("${GW.LOOKUP_TYPE}",filePath,httpFolder,httpUrl,"W");
}
</script>
</dd>
</dl>
</c:forEach>
</fieldset>
</form>
//form返回的不是<script src='' ></script>这种标签返回会再脚本标签中会以js执行,form 返回没有<script></script>,所以返回时要加这个标签
iframe://小form
内容:
<html>
<head>
<title>文件上传</title>
</head>
<body style="margin:1px">
<form action="${pageContext.request.contextPath}/account/tbCusFirmChg/uploadSave?allowFileType=${allowFileType}&callBackFunction=${callBackFunction}&virtualSavePath=${virtualSavePath}&fileType=${fileType}" method="post" enctype="multipart/form-data" >
<input type="file" name="file" id="file">
<input type="submit" value="上传" style="height:22px">
</form>
</body>
</html>
///////Java中回调jsp中的js(写在iframe中)
@RequestMapping(value = "/account/tbCusFirmChg/uploadSave")
public String uploadSave(@RequestParam Map<String,Object> upMap,@RequestParam(value="file") MultipartFile file,Model model, HttpSession session, HttpServletRequest request,HttpServletResponse response) throws EsteelException {
String sc="<script language=javascript>alert('上传的文件夹大小为"+file.getSize()/1024L+"K,超过大小限制 "+StaticVariables.maxSize_PicFile/1024L+"K! ');history.back(); </script>";
ResponseUtil.print(sc, response);
注意如果是iframe的父应用parent.
ResponseUtil.print("<script type=\"text/javascript\">parent." + upMap.get("callBackFunction") + "('/file/upload/originName/" + re + "/open','" + StaticVariables.Base_Path + "','" + filePath + "','" + fileSize + "','" + fileFileName + "','" + new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()) + "');history.back();</script>", response);
}
public class ResponseUtil
{
public static int print(String strContent, HttpServletResponse response)
{
return print(strContent, "UTF-8", response);
}
public static int print(String strContent, String encoding, HttpServletResponse response)
{
int iFlag = 0;
try
{
response.setContentType("text/html;charset=" + encoding);
response.getWriter().print(strContent);
}
catch (Exception e)
{
iFlag = -1;
System.out.println("在RESPONSE的流中输出输出结果出现异常:" + e.getMessage());
}
return iFlag;
}
}
通过js回调显示tfs中的图片
///利用回调将保存好的图片信息反写到隐藏域,之后提交的就只提交普通的字段了
//当然这个要单独分出一个form专门提交图片(传一个提交一次),之后提交总的大的form,就只会提交大的普通字段,里面的小form不会再提交
大form中:
function showLogoPic(type,filePath,httpFolder,httpUrl,gblx){
var gblx= "_" + gblx + "_";
var demoPosPicObj = $("#demoLogoPicObj"+gblx+type);
var demoPosPicTd = $("#demoLogoPicTd"+gblx+type);
$("#zjvalue"+gblx+type).val(filePath);
demoPosPicObj.attr("src" , "<%=rootPath%>/"+filePath);
demoPosPicTd.show();
$("#TIP_zjvalue"+gblx+type).html("");
}
@RequestMapping(value = "/file/upload/{originName}/{fileName}/open")
public void tbBasBedSrtList(HttpSession session, HttpServletRequest request, HttpServletResponse response, @PathVariable String fileName, @PathVariable String originName)
throws EsteelException, IOException {
response.setCharacterEncoding("UTF-8");
ByteArrayOutputStream fosByte = (ByteArrayOutputStream) TFSUtil.getTfsFile(fileName);
byte[] bytes = fosByte.toByteArray();
ByteArrayInputStream fis = new ByteArrayInputStream(bytes);
byte[] bytesRead = new byte[1024 * 1024];
int length = 0;
while ((length = fis.read(bytesRead)) != -1) {
response.getOutputStream().write(bytesRead, 0, length);
}
}