`
y806839048
  • 浏览: 1117056 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

多图片的上传及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);

}

}

 

分享到:
评论

相关推荐

    oss web端图片直传回调 java签名+html+javaScript maven项目

    综上所述,这个项目提供了一个完整的示例,涵盖了从HTML界面、JavaScript上传逻辑到Java签名和回调处理的全过程,对于理解OSS Web端图片直传有很好的参考价值。然而,由于技术的不断更新,使用时可能需要对代码进行...

    oss文件上传(带回调)

    【标题】"OSS文件上传(带回调)"指的是在Spring Boot应用中集成对象存储服务(Object Storage Service,简称OSS),并实现文件上传功能,同时具备回调机制,即在文件上传完成后,系统会自动执行预设的回调函数,通常...

    java多图片上传、删除、预览,post提交

    - layui图片上传的回调机制包括success和error,可以用来处理上传成功或失败后的逻辑。 3. **图片预览**: - layui插件也提供了图片预览功能,通常通过`layui-layer`弹出层展示。用户选择图片后,可以在前端预览...

    java上传图片后立即将图片显示出来

    综上所述,"java上传图片后立即将图片显示出来"这一功能的实现涉及到Java的文件上传处理、IFrame技术的运用、前端JavaScript的交互以及服务器端的文件管理和安全控制等多个方面。理解这些关键点对于开发高质量的Web...

    Java开发之文本编辑器TinyMCE-含上传本地图片

    - **前端JS代码**:前端部分需要利用`plugin.min.js`中的AJAX请求功能来调用Java工具类,并在成功响应后执行回调函数,将图片URL插入到编辑器中。 示例代码如下(部分): ```javascript // 假设使用jQuery $.ajax...

    uploadify实现多图片上传并预览Java版

    总结,"uploadify实现多图片上传并预览Java版"的项目,结合了前端的JavaScript技术与后端的Java服务,提供了一种方便的多文件上传解决方案,尤其适合图片的上传和预览。通过合理配置和适当的安全措施,可以在确保...

    java 图片异步上传

    在发送请求时,可以设置`async: true`开启异步模式,并通过回调函数或Promise处理上传结果。 2. **AJAX与Fetch API**:AJAX(Asynchronous JavaScript and XML)是使用`XMLHttpRequest`进行异步请求的经典方法,而...

    实现文件上传,以及表单提交成功的回调函数

    在这个场景下,"实现文件上传,以及表单提交成功的回调函数"意味着我们要关注两个主要部分:文件上传的实现和表单提交后的反馈机制。 1. **文件上传**: - **前端**:文件上传在现代浏览器中通常使用HTML5的`...

    java swfupload,上传,图片上传,文件上传,批量上传

    6. **进度显示**:SWFUpload支持文件上传进度的显示,需要在前端JavaScript和后端Java之间建立通信机制,比如使用Ajax回调或者WebSocket,实时更新上传进度。 7. **用户体验**:为了提供良好的用户体验,可以使用...

    利用diyUpload做多图片上传及预览

    以上就是使用“diyUpload”实现多图片上传及预览的基本流程。在实际应用中,你可能还需要考虑错误处理、文件大小限制、用户权限控制等更多细节。此外,为了提高用户体验,可以考虑使用Bootstrap或其它前端框架来美化...

    wangEditor上传图片 demo

    - 图片上传功能:利用wangEditor提供的API,设置图片上传的回调函数,处理用户选择的图片。 2. **图片上传的前端部分**: - 文件选择事件:监听文件输入框的change事件,获取用户选取的图片文件。 - 数据预处理...

    多文件预览上传-多图片预览上传

    "多文件预览上传-多图片预览上传"是一个专为JAVA开发的解决方案,它允许用户在实际上传之前预览文件,特别是图片,提高了用户体验并减少了错误的可能性。下面将详细解释这一功能的核心知识点: 1. **多文件选择与...

    Ueditor上传图片+图片回显+图片在线管理配置说明

    以上就是 Ueditor 图片上传、回显及在线管理的配置方法。记得在实际操作中根据你的项目结构进行相应的调整,确保每个路径都指向正确的位置。如果有项目代码可供参考,将更有利于理解与实施这些配置步骤。

    WebUploader多文件上传java实例

    此外,还可以根据自己的需求调整JavaScript和Java代码,实现更复杂的功能,如文件预处理、上传进度回调、错误处理等。 总的来说,"WebUploader多文件上传java实例"是一个实用的学习资源,帮助开发者快速理解和实践...

    JAVA|jQuery-File-Upload多文件上传及拖拽上传

    2. **进度条显示**:jQuery File Upload插件提供了事件监听和回调函数,你可以根据文件上传进度更新UI上的进度条。例如,`uploadProgress`事件可以在文件上传过程中触发,获取已上传的字节数和总字节数,从而计算出...

    okHttp 多图片上传(含服务器代码)--来自CSDN

    服务器端通常使用PHP、Java、Node.js等语言接收上传的图片。以PHP为例,你需要解析multipart/form-data格式的数据,接收文件并保存到服务器: ```php $dir = 'uploads/'; // 图片保存目录 foreach ($_FILES['image...

    多图片多文件上传

    例如,`jQuery.uploadify`允许我们定义上传的参数、文件类型限制和回调函数,使得上传过程更加可控。 其次,后端接收上传的图片和文件是另一个关键环节。这里通常涉及到服务器端的技术,如JavaSc(可能是指...

    jquery实现表单文件上传,并获取回调信息

    本文将详细讲解如何使用jQuery实现表单文件上传并获取回调信息。 首先,我们需要理解jQuery中的`ajaxForm`或`ajaxSubmit`方法,这两个方法是jQuery Form Plugin的一部分,可以在异步方式下提交表单,包括文件上传。...

    uploadify多文件上传(java版)

    8. **用户体验优化**:为了提供更好的用户体验,可以添加自定义的上传完成回调函数,比如在文件上传成功后更新页面内容,或者在失败时给出提示。 9. **配置与个性化**:Uploadify的样式和行为可以通过配置选项进行...

    java实现文件批量上传

    同时,前端可以通过回调函数来更新UI,显示上传进度或错误信息。 在提供的压缩包`upl`中,可能包含了以下文件: 1. `SWF配置文件`:定义了文件上传的工作流程,包括步骤、事件和界面布局。 2. `EXT表单组件`:包含...

Global site tag (gtag.js) - Google Analytics