多图片的上传及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);
}
}
相关推荐
综上所述,这个项目提供了一个完整的示例,涵盖了从HTML界面、JavaScript上传逻辑到Java签名和回调处理的全过程,对于理解OSS Web端图片直传有很好的参考价值。然而,由于技术的不断更新,使用时可能需要对代码进行...
【标题】"OSS文件上传(带回调)"指的是在Spring Boot应用中集成对象存储服务(Object Storage Service,简称OSS),并实现文件上传功能,同时具备回调机制,即在文件上传完成后,系统会自动执行预设的回调函数,通常...
- layui图片上传的回调机制包括success和error,可以用来处理上传成功或失败后的逻辑。 3. **图片预览**: - layui插件也提供了图片预览功能,通常通过`layui-layer`弹出层展示。用户选择图片后,可以在前端预览...
综上所述,"java上传图片后立即将图片显示出来"这一功能的实现涉及到Java的文件上传处理、IFrame技术的运用、前端JavaScript的交互以及服务器端的文件管理和安全控制等多个方面。理解这些关键点对于开发高质量的Web...
- **前端JS代码**:前端部分需要利用`plugin.min.js`中的AJAX请求功能来调用Java工具类,并在成功响应后执行回调函数,将图片URL插入到编辑器中。 示例代码如下(部分): ```javascript // 假设使用jQuery $.ajax...
总结,"uploadify实现多图片上传并预览Java版"的项目,结合了前端的JavaScript技术与后端的Java服务,提供了一种方便的多文件上传解决方案,尤其适合图片的上传和预览。通过合理配置和适当的安全措施,可以在确保...
在发送请求时,可以设置`async: true`开启异步模式,并通过回调函数或Promise处理上传结果。 2. **AJAX与Fetch API**:AJAX(Asynchronous JavaScript and XML)是使用`XMLHttpRequest`进行异步请求的经典方法,而...
在这个场景下,"实现文件上传,以及表单提交成功的回调函数"意味着我们要关注两个主要部分:文件上传的实现和表单提交后的反馈机制。 1. **文件上传**: - **前端**:文件上传在现代浏览器中通常使用HTML5的`...
6. **进度显示**:SWFUpload支持文件上传进度的显示,需要在前端JavaScript和后端Java之间建立通信机制,比如使用Ajax回调或者WebSocket,实时更新上传进度。 7. **用户体验**:为了提供良好的用户体验,可以使用...
以上就是使用“diyUpload”实现多图片上传及预览的基本流程。在实际应用中,你可能还需要考虑错误处理、文件大小限制、用户权限控制等更多细节。此外,为了提高用户体验,可以考虑使用Bootstrap或其它前端框架来美化...
- 图片上传功能:利用wangEditor提供的API,设置图片上传的回调函数,处理用户选择的图片。 2. **图片上传的前端部分**: - 文件选择事件:监听文件输入框的change事件,获取用户选取的图片文件。 - 数据预处理...
"多文件预览上传-多图片预览上传"是一个专为JAVA开发的解决方案,它允许用户在实际上传之前预览文件,特别是图片,提高了用户体验并减少了错误的可能性。下面将详细解释这一功能的核心知识点: 1. **多文件选择与...
以上就是 Ueditor 图片上传、回显及在线管理的配置方法。记得在实际操作中根据你的项目结构进行相应的调整,确保每个路径都指向正确的位置。如果有项目代码可供参考,将更有利于理解与实施这些配置步骤。
此外,还可以根据自己的需求调整JavaScript和Java代码,实现更复杂的功能,如文件预处理、上传进度回调、错误处理等。 总的来说,"WebUploader多文件上传java实例"是一个实用的学习资源,帮助开发者快速理解和实践...
2. **进度条显示**:jQuery File Upload插件提供了事件监听和回调函数,你可以根据文件上传进度更新UI上的进度条。例如,`uploadProgress`事件可以在文件上传过程中触发,获取已上传的字节数和总字节数,从而计算出...
服务器端通常使用PHP、Java、Node.js等语言接收上传的图片。以PHP为例,你需要解析multipart/form-data格式的数据,接收文件并保存到服务器: ```php $dir = 'uploads/'; // 图片保存目录 foreach ($_FILES['image...
例如,`jQuery.uploadify`允许我们定义上传的参数、文件类型限制和回调函数,使得上传过程更加可控。 其次,后端接收上传的图片和文件是另一个关键环节。这里通常涉及到服务器端的技术,如JavaSc(可能是指...
本文将详细讲解如何使用jQuery实现表单文件上传并获取回调信息。 首先,我们需要理解jQuery中的`ajaxForm`或`ajaxSubmit`方法,这两个方法是jQuery Form Plugin的一部分,可以在异步方式下提交表单,包括文件上传。...
8. **用户体验优化**:为了提供更好的用户体验,可以添加自定义的上传完成回调函数,比如在文件上传成功后更新页面内容,或者在失败时给出提示。 9. **配置与个性化**:Uploadify的样式和行为可以通过配置选项进行...
同时,前端可以通过回调函数来更新UI,显示上传进度或错误信息。 在提供的压缩包`upl`中,可能包含了以下文件: 1. `SWF配置文件`:定义了文件上传的工作流程,包括步骤、事件和界面布局。 2. `EXT表单组件`:包含...