@model BtxCMS.Web.UI.Class.UpLoad.UploadModel
@{
    ViewBag.Title = "上传文件";
    Layout = "~/Areas/VIVI_HY_ADMIN/Views/Layout/_Layout_Base.cshtml";
}

@section Head{
    @*上传文件*@
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/App_Themes/Scripts/jquery/plugin/jquery.uploadify/uploadify.css")" />
    <script type="text/javascript" src="@Url.Content("~/App_Themes/Scripts/jquery/plugin/jquery.uploadify/swfobject.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/App_Themes/Scripts/jquery/plugin/jquery.uploadify/jquery.uploadify.v2.1.4.js")"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#fileUploadID').uploadify({ 'uploader': '/App_Themes/Scripts/Jquery/plugin/jquery.uploadify/uploadify.swf',
                'auto': false,
                'script': '@Url.RouteUrl("Upload")',
                'folder': '/Images',
                'buttonImg': '/App_Themes/Scripts/Jquery/plugin/jquery.uploadify/selectfile.png',
                'queueID': 'custom-queue',
                'width': '100',
                'height': '24',
                'cancelImg': '/App_Themes/Scripts/Jquery/plugin/jquery.uploadify/cancel.png',
                'fileExt': '@Model.Upload_FileExt',
                'fileDesc': '@Model.Upload_FileDesc',
                'sizeLimit': 1024 * 1024 * @Model.Upload_FileSize,
                'multi': @Model.Uploadify_FileNum > 1 ? "true" : "false",
                'scriptData': {
                    'Upload_IsOldFilesDel': 'False',
                    'Upload_IsAutoName': 'True',
                    'Upload_IsWeekFolder': 'False',
                    'Upload_IsWaterMark': 'False',
                    'Upload_IsSmall': 'False',
                    'Upload_Folder': '@Model.Upload_Folder'
                },
                'onSelectOnce': function (event, data) {
                    var html = '选择文件的总数：' + data.fileCount +
                    '<br/>所有选择的文件的总大小：' + data.allBytesTotal / 1024 + " KB";
                    $("#onselectonce").empty().append(html);
                },
                'onQueueFull': function (event, queueSizeLimit) {
                    var html = 'event:' + event +
                    '<br/>data.queueSizeLimit(取消后队列中剩余文件的大小):' + queueSizeLimit;
                    $("#onqueuefull").empty().append(html);
                },
                'onError': function (event, queueId, fileObj, errorObj) {
                    var html = queueId + '文件<br/>错误类型:' + errorObj.type + '<br/>' + '错误信息:' + errorObj.info + '<br/>';
                    $("#onerror").append(html);
                },
                'onProgress': function (event, queueId, fileObj, data) {
                    var html = '当前完成的百分比:' + data.percentage +
                    '<br/>当前上传的大小:' + data.bytesLoaded +
                    '<br/>文件队列中已经上传完的大小:' + data.allBytesLoaded +
                    '<br/>上传速率:' + data.speed + '||' + event.queueId;
                    $("#onprogress").empty().append(html);
                },
                'onComplete': function (event, queueID, fileObj, response, data) {
                    var FileJson = jQuery.parseJSON(response);
                    if (FileJson) {
                        html = "成功上传文件：" + FileJson.UploadUrl;
                        $('#filelist').val(FileJson.UploadUrl);
                    }
                    $("#oncomplete").append(html);
                },
                'onAllComplete': function (event, data) {
                    var html = '上传的所有文件个数:' + data.filesUploaded +
                    '<br/>出现错误的个数:' + data.errors +
                    '<br/>allBytesLoaded:' + data.allBytesLoaded +
                    '<br/>平均上传速率:' + data.speed + ' kb/s';
                    $("#onallcomplete").empty().append(html);
                }
            });
        });
        function btnUpload() {
            $('#fileUploadID').uploadifyUpload();
            
        }
        function btnCancel() {
            $('#fileUploadID').uploadifyClearQueue();
        }

        function ok() {
            window.parent.setUpload($('#filelist').val());
        }
    </script>
    <style type="text/css">
        .uploadifyQueue
        {
            @*border: 1px solid #E5E5E5;
            height: 213px;
            margin-bottom: 10px;
            width: 370px;*@
        }
        .btnUpload{ background:url(/App_Themes/Scripts/Jquery/plugin/jquery.uploadify/btnUpload.png) no-repeat; width:100px; height:24px; display:inline-block;}
        .btnCancel{}
    </style>
}
<body class="easyui-layout" style="overflow: hidden" scroll="no" fit="true">
    <div region="center" border="true" style="overflow-y: hidden;">
        <div class="easyui-tabs" class="easyui-tabs" style="width: 400px; height: 300px;"
            border="false" fit="true">
            <div title="上传文件列表" id="fileQueue" style="padding: 10px;">
                <input type="file" id="fileUploadID" name="fileUploadID" class="button w150" value='选择文件'>
                <input id="filelist" type="hidden"  value=""/>
                <a href="javascript:btnUpload()" class="btnUpload"></a><a href="javascript:btnCancel()"
                    class="btnCancel"></a>
                <div id="custom-queue">
                </div>
                <ul>
                    @*<li>onSelect[选择]:</li>*@
                    <li><span id="onselect"></span></li>
                    @*<li>onSelectOnce[选择多文件]:</li>*@
                    <li><span id="onselectonce"></span></li>
                    @*<li>onClearQueue[取消所有]:</li>*@
                    <li><span id="onclearqueue"></span></li>
                    @*<li>onQueueFull[选择文件超出个数]:</li>*@
                    <li><span id="onqueuefull"></span></li>
                    @*<li>onError[异常]:</li>*@
                    <li><span id="onerror"></span></li>
                    @*<li>onProgress[上传进度]:</li>*@
                    <li><span id="onprogress"></span></li>
                    @*<li>onComplete[单个文件上传状态]:</li>*@
                    <li><span id="oncomplete"></span></li>
                    @*<li>onAllComplete[全部上传后触发]:</li>*@
                    <li><span id="onallcomplete"></span></li>
                </ul>
            </div>
            <div title="已上传文件" id="fileUploaded" closable="false" style="padding: 10px;">
            </div>
        </div>
    </div>
     <div region="south" border="false" style="text-align: center; padding: 5px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="return ok();">
            确定</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
                onclick="return window.parent.closeUpload();">取消</a>
    </div>
</body>
