342 lines
12 KiB
HTML
342 lines
12 KiB
HTML
<#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()} |