Multiple image upload and Java callback js()

Multiple image upload and Java callback js();

js callback must know not only

$(document).ready(function (){

//loadData();

});

This can be called during initial initialization, and the declared function can be called directly with the function name anywhere in js

tt();

function tt() {

alert(221);

}

</script>

The disadvantage of uploading with the same name is that it cannot solve the problem of dynamically adding multiple file uploads with different names.

(1) On the basis of a picture ():

Base:

1. Configure complex text (image parser)

2, the form is written in a complex submission mode

<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>

special:

3, the input upload control name is the same

<label>Upload image:

</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>

<img id="imghead"

src="${pageContext.request.contextPath}${vo.picture_address}"

alt="" style="cursor: pointer; width: 100%;" />

</div>

4. The @controller reception is changed to "[]" array mode (the attributes with the same name are all received in this way)

@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);">

<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;">

${GN.LOOKUP_NAME.split(",")[0]}号：

</dt>

<c:if test="${!\"H\" eq GN.LOOKUP_TYPE}">

</c:if>

</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;">

${GN.LOOKUP_NAME.split(",")[1]}

</dt>

//小的form

</span>

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;">

${GW.LOOKUP_NAME}号：

</dt>

<c:if test="${!\"M\" eq GW.LOOKUP_TYPE && !\"N\" eq GW.LOOKUP_TYPE}">

</c:if>

</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;">

${GW.LOOKUP_NAME}：

</dt>

</span>

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>

</head>

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

}

Multiple image upload and Java callback js()

Guess you like