ziqim/zhiqim_ui/document/tutorial/ui/tool/upload.htm

<#def title = "文件上传"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 知启蒙文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
<#def prevUrl = "imageClipper.htm"/>
<#def nextUrl = "uploadLarge.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav("document")}

<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>

<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "tool", "upload")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "文件上传")}
<div class="content">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
    <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 = "ZUpload";
        upload.fileDir = "tutorial";
        upload.onCompleted = function(fileUrl){Z("#ZUploadCompleted").html("上传成功，URL：<a href='"+fileUrl+"' target='_blank'>"+fileUrl+"</a>");};
        upload.execute();
    });
    </script>
    <!-- 上传文件按钮 -->
    <button id="ZUpload" type="button" class="z-button z-blue z-w120">上传文件</button><br><br>
    
    <!-- 上传文件完成信息 -->
    <span id="ZUploadCompleted"></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.contextPath = "${context.getContextPath()}";
        uploadpreview.elem = "ZUploadPreview";
        uploadpreview.fileDir = "tutorial";
        uploadpreview.onPreview = function(fileUrl){Z("#ZUploadPreviewLocation").html("<img src='"+fileUrl+"' style='max-width:80px;max-height:80px'>")};
        uploadpreview.onCompleted = function(fileUrl){Z("#ZUploadPreviewCompleted").html("上传成功，URL：<a href='"+fileUrl+"' target='_blank'>"+fileUrl+"</a>");};
        uploadpreview.execute();
    });
    
    function doUploadonePreview()
    {
        uploadpreview.upload();
    }
    </script>
    
    <!-- 上传文件预览 -->
    <div id="ZUploadPreviewLocation" class="z-w100p z-h80"></div>
    
    <!-- 上传文件按钮 -->
    <button id="ZUploadPreview" type="button" class="z-button z-blue z-w120">选择文件</button>
    <button id="ZUploadUpload" type="button" class="z-button z-w120" onclick="doUploadonePreview();">上传文件</button><br><br>
    
    <!-- 上传文件完成信息 -->
    <span id="ZUploadPreviewCompleted"></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 = "ZUploadmultPreview";
        uploadmultpreview.fileDir = "tutorial";
        uploadmultpreview.onPreview = function(results)
        {
            uploadmultpreview.buildPreviewHtml("ZUploadmultPreviewLocation");
        };
        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：<a href='"+results[i].success+"' target='_blank'>"+results[i].success+"</a>";
                else
                    html += "上传失败，原因："+results[i].error;
            }
            Z("#ZUploadmultPreviewCompleted").html(html);
        };
        uploadmultpreview.execute();
    });
    
    function doUploadmultPreview()
    {
        uploadmultpreview.upload();
    }
    </script>
    
    <!-- 上传文件预览 -->
    <div id="ZUploadmultPreviewLocation" class="z-w100p z-h80"></div>
    
    <!-- 上传文件按钮 -->
    <div class="z-relative-left z-w100p">
        <button id="ZUploadmultPreview" class="z-button z-blue z-w120">选择文件</button>
        <button id="ZUploadmultUpload" class="z-button z-w120" onclick="doUploadmultPreview();">上传文件</button>
    </div>
    
    <!-- 上传文件完成信息 -->
    <div id="ZUploadmultPreviewCompleted" 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;">
    <!-- 表单文件上传 -->
    ${Htmls.toCallFrame()}
    <form action="uploadForm.htm" method="post" enctype="multipart/form-data" data-role="z-call-frame">
        参数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>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}