多图片的上传及Java回调js()

多图片的上传及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">&nbsp;*</font>

</c:if>

&nbsp;<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>&nbsp;</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">&nbsp;*</font>

</c:if>

&nbsp;<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>&nbsp;</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);

}

}