zyy/ziqim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
zhuyiyi
2025-02-20 14:59:35 +08:00
parent d7be84fac6
commit d4a3bb8ffc
2541 changed files with 336536 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zhiqim_ui/document/tutorial/uim/tool/uploadLarge.htm
+169
View File
@@ -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()}