zyy/ziqim
1
0
Fork 0
程式碼 問題 合併請求 Actions 套件 專案 版本發布 Wiki 動態

first commit

瀏覽代碼
此提交包含在：
zhuyiyi
2025-02-20 14:59:35 +08:00
父節點 d7be84fac6
當前提交 d4a3bb8ffc
共有 2541 個檔案被更改，包括 336536 行新增 和 0 行删除
下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案
zhiqim_ui/document/tutorial/uim/tool/ajax.htm
+759
查看文件
@@ -0,0 +1,759 @@
<#def title = "AJAX"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术"/>
<#def prevUrl = "../nav/tabnav.htm"/>
<#def nextUrl = "imageClipper.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<script>
<!--
function doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
$this.find("section > div").next("div > span").html(html);
}
//-->
</script>
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "tool", "ajax")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "Ajax")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">AJAX：</p>
<p class="z-color-333" style="text-indent:38px;">
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
凡狐AJAX采用面向RMI的概念设计，通过指定类和方法，传入参数对应方法的参数，通过RMI访问JAVA类的方法获取执行结果。
</p>
</div>
<#-- 一、调用成功，回调函数（无参数的方法） -->
<div class="tutorial title">一、调用成功，回调函数（无参数的方法）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestSuccess()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("com.zhiqim.zhiqim.tutorial.presenter.AjaxPresenter");
ajax.setMethodName("doTestSuccess");
ajax.setFailureAlert();
ajax.setSuccess(function(){Z.alert(this.responseText);});
ajax.setLoading(document, true);
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:void(0);" onclick="doTestSuccess();">点我执行[doTestSuccess]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>
<#-- 二、调用成功，回调函数（带参数、使用类别名@AnAlias） -->
<div class="tutorial title">二、调用成功，回调函数（带参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestParam()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestParam");
ajax.addParam("111111");
ajax.addParam("222222");
ajax.setCallback(function()
{
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
});
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestParam();">点我执行[doTestParam]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、通过ajax.addParam();设置参数，参数个数和类型要和后端对应，支持字符串和基本类型
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>
<#-- 三、调用成功，显示到元素中（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">三、调用成功，显示到元素中（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestSuccess2()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestSuccess");
ajax.setCallback("successId");
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestSuccess2();">点我执行[doTestSuccess]函数</a><br><br>
<!-- 编写AJAX的响应结果 -->
返回内容：<span id="successId"></span>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
2、在页面上设置点击执行函数，把结果放置到Z("#"+id)中<br>
</div>
</section>
</div>
<#-- 四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestLoading()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestLoading");
ajax.setCallback(function()
{
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
});
ajax.setLoading(document, true);
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestLoading();">点我执行[doTestLoading]函数</a><br><br>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、通过ajax.setLoading(document, true);设置全屏加载器且遮罩，然后执行<br>
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>
<#-- 五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestLoading2()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestLoading");
ajax.setCallback("testLoading2");
ajax.setLoading("testLoading2");
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestLoading2();">点我执行[doTestLoading2]函数</a><br><br>
<!-- 指定加载器的位置 -->
<div id="testLoading2" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、通过ajax.setLoading("testLoading2");设置在testLoading2上显示加载器无遮罩，然后执行<br>
3、如果需要遮罩层，设置为ajax.setLoading("testLoading2", true);
4、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>
<#-- 六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestLoading3()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestLoading");
ajax.setCallback("testLoading3");
ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestLoading3();">点我执行[doTestLoading3]函数</a><br><br>
<!-- 指定加载器的位置 -->
<div id="testLoading3" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、通过Z.loading()函数自定义加载器，然后通过ajax.setLoading();设置到Z.Ajax中<br>
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>
<#-- 七、调用失败（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">七、调用失败（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestError()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestError");
ajax.setCallback(function()
{
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
});
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestError();">点我执行[doTestError]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>
<#-- 八、调用异常（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">八、调用异常（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestException()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestException");
ajax.setCallback(function()
{
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
});
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestException();">点我执行[doTestException]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>
<#-- 九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestInterceptor()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestInterceptor");
ajax.setCallback(function()
{
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
});
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestInterceptor();">点我执行[doTestInterceptor]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
3、拦截器由Java后端设置，如：
<span class="z-text-prewrap z-pre">
@AnInterceptor("chkAjax1")
public static void doTestInterceptor(HttpRequest request)
{
request.setResponseResult("返回成功信息");
}
</span>
<span class="z-text-prewrap z-pre">
@AnAlias("chkAjax1")
public class AjaxChk1Interceptor implements Interceptor
{
@Override
public void intercept(HttpRequest request) throws Exception
{
request.setResponseError("拦截器不通过");
}
}
</span>
</div>
</section>
</div>
<#-- 十、拦截器，未通过显示未通过信息（同步调用、无参数、使用类别名@AnAlias） -->
<div class="tutorial title">十、拦截器（同步调用、无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestSyncInterceptor()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setSync();
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestInterceptor");
ajax.execute();
Z.alert("状态："+ajax.responseStatus+"<br>信息："+ajax.responseText);
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestSyncInterceptor();">点我执行[doTestSyncInterceptor]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法<br>
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
4、拦截器由Java后端设置，如：
<span class="z-text-prewrap z-pre">
@AnInterceptor("chkAjax1")
public static void doTestInterceptor(HttpRequest request)
{
request.setResponseResult("返回成功信息");
}
</span>
<span class="z-text-prewrap z-pre">
@AnAlias("chkAjax1")
public class AjaxChk1Interceptor implements Interceptor
{
@Override
public void intercept(HttpRequest request) throws Exception
{
request.setResponseError("拦截器不通过");
}
}
</span>
</div>
</section>
</div>
<#-- 十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestInterceptor2()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestInterceptor2");
ajax.setCallback(function()
{
alert("状态:"+this.responseStatus+",信息:"+this.responseText);
});
ajax.execute();
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestInterceptor2();">点我执行[doTestInterceptor2]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
3、拦截器由Java后端设置，如：
<span class="z-text-prewrap z-pre">
@AnInterceptor("chkAjax2")
public static void doTestInterceptor2(HttpRequest request)
{
request.setResponseResult("返回成功信息");
}
</span>
<span class="z-text-prewrap z-pre">
@AnAlias("chkAjax2")
public class AjaxChk2Interceptor implements Interceptor
{
@Override
public void intercept(HttpRequest request) throws Exception
{
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
}
}
</span>
</div>
</section>
</div>
<#-- 十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias） -->
<div class="tutorial title">十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 编写AJAX的函数 -->
<script>
function doTestSyncInterceptor2()
{
var ajax = new Z.Ajax();
ajax.setContextPath("${context.getContextPath()}");
ajax.setSync();
ajax.setClassName("AjaxPresenter");
ajax.setMethodName("doTestInterceptor2");
ajax.execute();
alert("状态:"+ajax.responseStatus+",信息:"+ajax.responseText);
}
</script>
<!-- 编写AJAX的点击调用 -->
<a href="javascript:doTestSyncInterceptor2();">点我执行[doTestSyncInterceptor2]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、定义一个AJAX调用函数，设置类类别名、类方法<br>
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
4、拦截器由Java后端设置，如：
<span class="z-text-prewrap z-pre">
@AnInterceptor("chkAjax2")
public static void doTestInterceptor2(HttpRequest request)
{
request.setResponseResult("返回成功信息");
}
</span>
<span class="z-text-prewrap z-pre">
@AnAlias("chkAjax2")
public class AjaxChk2Interceptor implements Interceptor
{
@Override
public void intercept(HttpRequest request) throws Exception
{
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
}
}
</span>
</div>
</section>
</div>
<#-- AJAX调用参数说明 -->
<div class="tutorial title">AJAX调用参数说明（请求参数十个，响应结果两个）</div>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="20%">参数</td>
<td width="30%">值</td>
<td width="*">说明</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">请求参数</td>
</tr>
<tr>
<td class="z-samp">contextPath</td>
<td>默认为空</td>
<td>当前上下文环境路径，如/admin，默认为空表示根上下文路径</td>
</tr>
<tr>
<td class="z-samp">className</td>
<td>必须</td>
<td>调用的类名或类别名，如AjaxPresenter/com.zhiqim.zhiqim.tutorial.presenter.AjaxPresenter</td>
</tr>
<tr>
<td class="z-samp">methodName</td>
<td>必须</td>
<td>调用的类的方法名，如doTestInterceptor</td>
</tr>
<tr>
<td class="z-samp">async</td>
<td>true</td>
<td>异常还是同步调用，默认异步，true|false</td>
</tr>
<tr>
<td class="z-samp">params</td>
<td>[]</td>
<td>参数数组，可通过addParam();函数设置参数，如addParam("abc");</td>
</tr>
<tr>
<td class="z-samp">callback</td>
<td>null</td>
<td>回调函数或回调elem的id<br>
1、函数的this为Z.Ajax对象，可以通过this.responseStatus和this.responseText获取结果状态和结果文本<br>
2、回调ID时，填写elem的id，即把this.responseText的值填充到elem中，有三种填充方式，见callbackMethod参数
</td>
</tr>
<tr>
<td class="z-samp">callbackMethod</td>
<td>"html"</td>
<td>回调ID时的方法，三种"html"|"text"|"val"</td>
</tr>
<tr>
<td class="z-samp">callScript</td>
<td>true</td>
<td>是否在AJAX结果的改变重置由data-role的缓存，如Z.Tooltip,Z.Select等，true|false，默认true</td>
</tr>
<tr>
<td class="z-samp">loading</td>
<td>null</td>
<td>三种加载器，通过方法setLoading();方法来设置<br>
1、传入Z.loading对象，参数由对象指定，如ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
2、传入target和是否遮罩，如ajax.setLoading(document, true);或无遮罩ajax.setLoading(document);
3、传入targetId和是否遮罩，如ajax.setLoading("testLoading3", true);或无遮罩ajax.setLoading("testLoading3");
4、传入一个函数，在加载时回调该函数，如ajax.setLoading(function(){});此方式用于自定义操作
</td>
</tr>
<tr>
<td class="z-samp">loadingParam</td>
<td>null</td>
<td>加载器参数，通过方法setLoading();方法来设置，是第二个参数<br>
1、当loading是Z.loading和字符串时表示是否遮罩<br>
2、当#ID时指定的HTML，成功后换回原始HTML
</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">响应参数</td>
</tr>
<tr>
<td class="z-samp">responseStatus</td>
<td>0</td>
<td>响应状态，0表示成功，601－603表示跳转，其他表示错误</td>
</tr>
<tr>
<td class="z-samp">responseText</td>
<td>null</td>
<td>响应文本字符串，默认是text/plain格式，XML或JSON格式自行转化</td>
</tr>
</table>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/tool/imageClipper.htm
+113
查看文件
@@ -0,0 +1,113 @@
<#def title = "头像裁剪"/>
<#def keyword = "Avatar"/>
<#def desc = "头像裁剪是指对上传的图片，根据要求裁剪成指定大小的图片。支持放大和缩小图片，和通过移动图片，锁定裁剪位置"/>
<#def prevUrl = "ajax.htm"/>
<#def nextUrl = "upload.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${Scripts.src("/zinc/www/zhiqim_image_clipper.js")}
<script>
Z.onload(function()
{
var clipper = new Z.ImageClipper();
clipper.tigger = "clipper";
clipper.img = "/zinc/www/default.jpg";
clipper.execute();
});
function doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
$this.find("section > div").next("div > span").html(html);
}
</script>
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "tool", "imageClipper")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "头像裁剪")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">头像裁剪：</p>
<p class="z-color-333" style="text-indent:38px;">
头像裁剪是指对上传的图片，根据要求裁剪成指定大小的图片。支持放大和缩小图片，和通过移动图片，锁定裁剪位置
</p>
</div>
<#-- 一、简单拖拽 -->
<div class="tutorial title">一、头像裁剪</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="min-height:250px;">
<!-- 初始化头像裁切控件 -->
<div id="clipper" style="margin-left:50px;margin-top:10px;width:620px;height:460px;"></div>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、拖拽三要求，可拖拽对象、拖把和拖拽父范围，这三个对象都需要设置id<br>
2、简单拖拽只需要配置可拖拽对象、拖把两个id，简单拖拽不固定范围<br>
</div>
</section>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/tool/qrcode.htm
+191
查看文件
@@ -0,0 +1,191 @@
<#def title = "文件上传"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
<#def prevUrl = "zeditor.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<script>
<!--
function doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
$this.find("section > div").next("div > span").html(html);
}
//-->
</script>
${Scripts.src(context.getRootPath("/src/qrcode/qrcode.js"))}
${Scripts.src(context.getRootPath("/src/qrcode/zhiqim_qrcode.js"))}
${zhiqim_com_head_end()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "tool", "qrcode")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "生成二维码")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">生成二维码：</p>
<p class="z-color-333" style="text-indent:38px;">
通过本地 JS 将字符串转成二维码图形输出，支持方法定义、实例定义两种。
</p>
</div>
<#-- 一、调用方法的方式 -->
<div class="tutorial title">一、调用方法的方式</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<script>
Z.onload(function()
{
Z("#ZQrcodeTrigger").on("click",function(){
var urlString = Z("#ZQrcodeUrl").val();
//调用方法的方式一
Z("#ZQrcodeCompleted").qrcode(urlString);
/*调用方法的方式二
Z("#ZQrcodeCompleted").qrcode({
text: "urlString", // 需转换成二维码的字符串
render: "canvas", // 实现方式，可选："canvas"、"table"，默认为 "canvas"
width: 256, // 二维码的宽度，默认为 256
height: 256, // 二维码的高度，默认为 256
typeNumber: -1, // < 1，则自动计算，最大值为40；数值越大，二维码密度越大，默认为 -1
correctLevel: 2, // 取值范围[0-3]，4种计算方式，默认为2
background: "#ffffff", // 背景色，默认为 "#ffffff"
foreground: "#000000" // 二维码颜色，默认为 "#000000"
});
*/
});
});
</script>
<!-- 自定义 url -->
<input id="ZQrcodeUrl" type="text" class="z-input z-blue" value=""/>
<!-- 触发按钮 -->
<button id="ZQrcodeTrigger" type="button" class="z-button z-blue z-w120">生成二维码</button><br><br>
<!-- 生成二维码图片区域 -->
<span id="ZQrcodeCompleted"></span>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、text 参数必须传入非空值，只有字符串一个参数时，无需详细写明，如方式一<br>
2、这种方法不需要传入 elem 参数<br>
</div>
</section>
</div>
<#-- 二、定义实例的方式 -->
<div class="tutorial title">二、定义实例的方式</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<script>
Z.onload(function()
{
Z("#ZQrcodeTrigger2").on("click",function(){
var urlString = Z("#ZQrcodeUrl2").val();
//定义实例的方式
var newQrcode = new Z.Qrcode();
newQrcode.elem= Z("#ZQrcodeCompleted2"); // 呈现二维码的地方
newQrcode.text= urlString; // 需转换的字符串
newQrcode.render= "canvas"; // 实现方式，可选："canvas"、"table"，默认为 "canvas"
newQrcode.width= 256; // 二维码的宽度，默认为 256
newQrcode.height= 256; // 二维码的高度，默认为 256
newQrcode.typeNumber= 0; // < 1，则自动计算，最大值为40；数值越大，二维码密度越大，默认为 -1
newQrcode.correctLevel= 2; // 取值范围[0-3]，4种计算方式，默认为2
newQrcode.background= "#ffffff"; // 背景色，默认为 "#ffffff"
newQrcode.foreground= "#000000" // 二维码颜色，默认为 "#000000"
newQrcode.execute();
});
});
</script>
<!-- 自定义 url -->
<input id="ZQrcodeUrl2" type="text" class="z-input z-blue" value=""/>
<!-- 触发按钮 -->
<button id="ZQrcodeTrigger2" type="button" class="z-button z-blue z-w120">生成二维码</button><br><br>
<!-- 生成二维码图片区域 -->
<span id="ZQrcodeCompleted2"></span>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、text 参数必须传入非空值<br>
2、实例方式清晰明了，必须传入 elem 的值<br>
</div>
</section>
</div>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/tool/upload.htm
+342
查看文件
@@ -0,0 +1,342 @@
<#def title = "文件上传"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
<#def prevUrl = "imageClipper.htm"/>
<#def nextUrl = "uploadLarge.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<script>
<!--
function doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
$this.find("section > div").next("div > span").html(html);
}
//-->
</script>
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "tool", "upload")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "文件上传")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">文件上传：</p>
<p class="z-color-333" style="text-indent:38px;">
凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。
</p>
</div>
<#-- 一、最简单文件上传 -->
<div class="tutorial title">一、最简单文件上传</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 初始化上传控件 -->
<script>
Z.onload(function()
{
var upload = new Z.Upload();
upload.contextPath = "${context.getContextPath()}";
upload.elem = "FUploadone";
upload.onCompleted = function(fileUrl){Z("#FUploadoneCompleted").html("上传成功，URL："+fileUrl);};
upload.execute();
});
</script>
<!-- 上传文件按钮 -->
<button id="FUploadone" type="button" class="z-button z-blue z-w120">上传文件</button><br><br>
<!-- 上传文件完成信息 -->
<span id="FUploadoneCompleted"></span>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、最简文件上传，是初始化单个文件上传控件<br>
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
3、在后台配置上下文环境属性upload.rootDir即可
</div>
</section>
</div>
<#-- 二、单文件上传（先预览后上传） -->
<div class="tutorial title">二、单文件上传（先预览后上传）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 初始化上传控件 -->
<script>
var uploadpreview = null;
Z.onload(function()
{
uploadpreview = new Z.Upload();
uploadpreview.elem = "FUploadonePreview";
uploadpreview.contextPath = "${context.getContextPath()}";
uploadpreview.onPreview = function(fileUrl){Z("#FUploadonePreviewLocation").html("<img src='"+fileUrl+"' width='80' height='80'>")};
uploadpreview.onCompleted = function(fileUrl){Z("#FUploadonePreviewCompleted").html("上传成功，URL："+fileUrl);};
uploadpreview.execute();
});
function doUploadonePreview()
{
uploadpreview.upload();
}
</script>
<!-- 上传文件预览 -->
<div id="FUploadonePreviewLocation" class="z-w100p z-h80"></div>
<!-- 上传文件按钮 -->
<button id="FUploadonePreview" type="button" class="z-button z-blue z-w120">选择文件</button>
<button id="FUploadoneUpload" type="button" class="z-button z-w120" onclick="doUploadonePreview();">上传文件</button><br><br>
<!-- 上传文件完成信息 -->
<span id="FUploadonePreviewCompleted"></span>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、最简文件上传，是初始化单个文件上传控件<br>
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
3、在后台配置上下文环境属性upload.rootDir<br>
4、如果需要分成两步，先预览后上传，则增加预览处理
</div>
</section>
</div>
<#-- 三、多文件上传（先预览后上传，默认图片） -->
<div class="tutorial title">三、多文件上传（先预览后上传，默认图片）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:200px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 初始化上传控件 -->
<script>
var uploadmultpreview = null;
Z.onload(function()
{
uploadmultpreview = new Z.Uploadmult();
uploadmultpreview.elem = "FUploadmultPreview";
uploadmultpreview.onPreview = function(results)
{
uploadmultpreview.buildPreviewHtml("FUploadmultPreviewLocation");
};
uploadmultpreview.onCompleted = function(results)
{
var html = "";
for (var i=0;i<results.length;i++){
if (i != 0)
html += "<br>";
if (results[i].success)
html += "上传成功，URL："+results[i].success;
else
html += "上传失败，原因："+results[i].error;
}
Z("#FUploadmultPreviewCompleted").html(html);
};
uploadmultpreview.execute();
});
function doUploadmultPreview()
{
uploadmultpreview.upload();
}
</script>
<!-- 上传文件预览 -->
<div id="FUploadmultPreviewLocation" class="z-w100p z-h80"></div>
<!-- 上传文件按钮 -->
<div class="z-relative-left z-w100p">
<button id="FUploadmultPreview" class="z-button z-blue z-w120">选择文件</button>
<button id="FUploadmultUpload" class="z-button z-w120" onclick="doUploadmultPreview();">上传文件</button>
</div>
<!-- 上传文件完成信息 -->
<div id="FUploadmultPreviewCompleted" class="z-relative-left z-w100p z-mg10 z-lh150p"></div>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、最简文件上传，是初始化多个文件上传控件<br>
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
3、在后台配置上下文环境属性upload.rootDir<br>
4、如果需要分成两步，先预览后上传，则增加预览处理
</div>
</section>
</div>
<#-- 四、表单文件上传，可以含参数 -->
<div class="tutorial title">四、表单文件上传，可以含参数</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16 z-lh300p" style="padding-top:40px;">
<!-- 表单文件上传 -->
<form action="uploadForm.htm" method="post" enctype="multipart/form-data">
参数1：<input name="p1" class="z-input"><br>
参数2：<input name="p2" class="z-input"><br>
<button type="button" class="z-button z-blue z-w120" onclick="Z(this).next('input')[0].value=null;Z(this).next('input')[0].click();">选择文件</button>
<input class="z-hide" type="file" name="file" accept="*.*" onchange="Z(this).next('span').text(this.value);" single>
<span></span>
<button type="submit" class="z-button">上传</button>
</form>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、表单文件上传的特点是支持参数一起传递，采用multipart/form-data格式<br>
2、把真实的文件上传按钮隐藏起来（各浏览器表现不一样，太不美观），使用一个button代替<br>
3、提供一个span用户显示文件选择的路径，这里也可以设计成预览<br>
4、上传button，和提供一个Action处理数据。如下：
<span class="z-text-prewrap z-pre">
public class UploadFormAction implements Action, HttpdConstants
{
private static final Log log = LogFactory.getLog(UploadFormAction.class);
@Override
public void execute(HttpRequest request) throws Exception
{
String rootDir = request.getContextAttributeString(_SERV_UPLOAD_ROOT_DIR_);
if (Validates.isEmptyBlank(rootDir) || !Files.mkDirectory(rootDir))
{
request.setAlertMsg("未配置上传目录，不支持上传");
return;
}
HttpUploader uploader = new HttpUploader();
try
{//最大支持2M
uploader.parseHttpRequest(request, 2*1024*1024);
String fileExt = uploader.getFileExt();
if(Validates.isEmpty(fileExt) || !Validates.isContain("jpg,png,gif", ",", fileExt))
{
request.setAlertMsg("仅支持图片，请重新上传");
return;
}
//文件字节比较
byte[] content = uploader.getBytes();
if (!(Bytes.isGIZ(content) || Bytes.isPNG(content) || Bytes.isJPG(content)))
{
request.setAlertMsg("图片格式不正确，请重新上传");
return;
}
//读出参数
String param1 = uploader.getParameter("p1");
String param2 = uploader.getParameter("p2");
log.info("参数1："+param1+",参数2："+param2);
//保存文件
String fileDir = Strings.addEndsWith(Files.toLinuxPath(rootDir), "/");
String fileName = Ids.longId() + "." + fileExt;
uploader.writeToFile(fileDir + fileName);
request.setAlertMsg("上传成功");
}
catch(Exception e)
{
request.setAlertMsg("上传失败");
}
finally
{
uploader.close();
}
}
}
</span>
</div>
</section>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/tool/uploadLarge.htm
+169
查看文件
@@ -0,0 +1,169 @@
<#def title = "大文件上传"/>
<#def keyword = "大文件上传 ZhiqimUI zhiqim"/>
<#def desc = " 凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传，大文件上传断点续传（HTML5和Flash两种）等。"/>
<#def prevUrl = "upload.htm"/>
<#def nextUrl = "zeditor.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<script>
<!--
function doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
$this.find("section > div").next("div > span").html(html);
}
//-->
</script>
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "tool", "uploadlarge")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "大文件上传")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">大文件上传：</p>
<p class="z-color-333" style="text-indent:38px;">
凡狐大文件上传提供了（HTML5和Flash两种）的上传方式，支持断点续传、数据库存储文件碎片和文件信息，提供指定目录和文件名等功能。
</p>
</div>
<#-- 一、HTML5大文件断点续传 -->
<div class="tutorial title">一、HTML5大文件断点续传</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px;">
<!-- 初始化上传控件 -->
<script>
Z.onload(function()
{
var upload = new Z.UploadLarge();
upload.elem = "FUpload_HTML5";
//upload.showResult = false;
upload.contextPath = "${context.getContextPath()}";
upload.onCompleted = function(fileId, fileName, fileUrl){};
upload.execute();
});
</script>
<!-- HTML5大文件断点续传 -->
<button id="FUpload_HTML5" class="z-button z-red z-w120">HTML5上传</button>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、需要zhiqim_uploader组件，或者自己实现com.zhiqim.zhiqim.httpd.context.service.upload.Upload接口<br>
2、设计目标是针对大文件分块上传，支持断点续传和秒传（MD5码相同认为已上传）<br>
3、在后台配置上下文环境属性upload.rootDir<br>
4、指定目录：upload.fileDir = "html5";
5、指定文件格式：upload.setFileFormatExt("image/gif, image/jpeg");
6、需支持HTML5协议的浏览器支持
</div>
</section>
</div>
<#-- 二、Flash大文件断点续传 -->
<div class="tutorial title">二、Flash大文件断点续传</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px;">
<!-- 初始化上传控件 -->
<script>
Z.onload(function()
{
var upload2 = new Z.UploadLarge();
upload2.elem = "FUpload_flash";
upload2.flash = true;
upload2.flashPath = "${FUploadLarge.swf}";
upload2.contextPath = "${context.getContextPath()}";
upload2.onCompleted = function(fileId, fileName, fileUrl){};
upload2.execute();
});
</script>
<!-- Flash大文件断点续传 -->
<button id="FUpload_flash" class="z-button z-orange z-w120">Flash上传</button>
</div>
<div class="z-relative-left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、需要zhiqim_uploader组件，或者自己实现com.zhiqim.zhiqim.httpd.context.service.upload.Upload接口<br>
2、设计目标是针对大文件分块上传，支持断点续传和秒传（MD5码相同认为已上传）<br>
3、在后台配置上下文环境属性upload.rootDir<br>
4、指定目录：upload.fileDir = "html5";
5、指定文件格式描述：upload.setFileFormatDesc("PNG和GIF图片(*.png;*.gif)");
6、指定文件格式：upload.setFileFormatExt("*.png;*.gif");
7、需支持Flash的浏览器
</div>
</section>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/tool/zeditor.htm
+106
查看文件
@@ -0,0 +1,106 @@
<#def title = "富文本编辑器"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。"/>
<#def prevUrl = "uploadLarge.htm"/>
<#def nextUrl = "qrcode.htm"/>
${zhiqim_com_head()}
<#var zRTEditor.css=context.getRootPath("/src/zRTEditor/zRTEditor.css")/>
<#var zRTEditor.js=context.getRootPath("/src/zRTEditor/zRTEditor.js")/>
${Styles.src(zRTEditor.css)}
${Scripts.src(zRTEditor.js)}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "tool", "zeditor")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "富文本编辑器")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">富文本编辑器：</p>
<p class="z-color-333" style="text-indent:38px;">
实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。
</p>
</div>
<#-- 一、示例样式 -->
<div class="tutorial title">一、示例</div>
<table class="z-table z-bordered z-pd10">
<tr bgcolor="#f5f5f5">
<td width="">效果预览</td>
<!--
<td width="50%">代码</td>
-->
</tr>
<tr>
<td class="example">
<script>
Z.onload(function()
{
var editor = new Z.ZhiqimEditor();
editor.setId("test");
editor.setAjaxClass("com.zhiqim.zhiqim.ui.FteUploadImagePresenter");
editor.execute();
});
</script>
<textarea id="test" name="test" class="z-textarea z-w100p z-h500"></textarea>
<button type="button" class="z-button z-mg-t15" onclick='Z("#result").html(Z("#test").val())'>点击查看输入内容</button>
<div class="z-mg-t40 z-mg-b40">
<div>查看结果</div>
<pre id="result"></pre>
</div>
</td>
<!--
<td><pre class="z-text-preline"></pre></td>
-->
</tr>
</table>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}