JW/EMIS.Web/Views/Common/Uploader.cshtml

@using Bowin.Web.Controls.Mvc;
@{
    ViewBag.Title = "附件上传";
}
<link href='@Url.Content("~/Content/bootstrap/css/bootstrap.css")' rel="stylesheet" type="text/css" />
<script src='@Url.Content("~/Scripts/bootstrap/bootstrap.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/Bowin.Control.Core/Plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/Bowin.Control.Core/Plugins/blueimp-file-upload/js/jquery.iframe-transport.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/Bowin.Control.Core/Plugins/blueimp-file-upload/js/jquery.fileupload.js")'type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/Bowin.Control.Core/Plugins/blueimp-file-upload/js/jquery.fileupload-process.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/Bowin.Control.Core/Plugins/blueimp-file-upload/js/jquery.fileupload-validate.js")'type="text/javascript"></script>

<script type="text/javascript">
    <!--
    $(function () {
        /*
        var cookieName = $("#hfcookieName").val();
        var cookieID = $("#hfcookieID").val();*/
        //取得外面传递进去的参数列表
        //var fromParam = $("#formFileLoad").attr("action").split('?')[1];
        /*参数列表说明
        MaxFileNum：最多能上传文件的数量，0或负数为不限制
        MaxFileSize:上传单个文件限制大小，单位MB
        FileType:文件格式类型 1表示文档,2表示图片或PDF,100表示不限制
        */

        //var IsMultiple = fromParam.getParamValue("MaxFileNum") == 0 ? true : false; //是否允许多选
        //var MaxFileSize = parseFloat(fromParam.getParamValue("MaxFileSize")); //上传单个文件限制大小
        var IsMultiple = true;
        var MaxFileSize = @(ViewBag.maxSize ?? 1024);
        var fileDesc = "", fileExt = "";
        var fileType = '@ViewBag.type';
        switch (fileType) {
            case "@((int)FileType.Document)": //1表示文档
                fileDesc = "文档文件 (*.doc,*.wps,*.docx,*txt,*pdf)";
                fileExt = "*.doc;*.docx;*.wps;*.txt;*.pdf;*.ppt;";
                break;
            case "@((int)FileType.Picture)": //2表示图片
                fileDesc = "图片文件 (*.gif,*.png,*.jpg,*.jpeg)";
                fileExt = "*.gif;*.png;*.jpg;*.jpeg;";
                break;
            case "@((int)FileType.Video)": //3表示视频片
                fileDesc = "视频文件 (*.mpg,*.mpeg,*.rmvb,*.mp4,*.avi,*.rm,*.flv,*.3gp)";
                fileExt = "*.mpg;*.mpeg;*.rmvb;*.mp4;*.avi;*.rm;*.flv;*.3gp;";
                break;
            case "@((int)FileType.PicAndVid)":
                fileDesc = "图片和视频文件 (*.gif,*.png,*.jpg,*.jpeg,*.flv)";
                fileExt = "*.gif;*.png;*.jpg;*.jpeg;*.flv;";
                break;
            case "@((int)FileType.Sound)":
                fileDesc = "声音文件 (*.mp3,*.wav,*.wma,*.3gp)";
                fileExt = "*.mp3;*.wav;*.wma;*.3gp;";
                break;
            case "@((int)FileType.ALL)": //100表示所有格式
                fileDesc = "所有格式文件 (*.*)";
                fileExt = "*.*;";
                break;
        }
        var parent = $.getPopupTopWindowInputData();
        var uploadScript = $(parent.document).find("fieldset[name='@ViewBag.name']").attr("data-uploadurl");
        if (!uploadScript) {
            uploadScript = '@Url.Content("~/Common/UploaderSave")';
        }

        var popupName='@ViewBag.name';

        $("#fileupload").attr("accept",fileExt);

        //$("#uploadbar").hide();

        $("#fileupload").fileupload({
            url:uploadScript,
            type:'POST',
            dataType: 'json',
            sequentialUploads: true,
            limitMultiFileUploadSize:MaxFileSize,
            formData:{ 'mdid': '@ViewBag.value', 'ASPSESSID': '@ViewBag.hfcookieName', 'AUTHID': '@ViewBag.hfcookieID', 'type': fileType, 'n': '@Request["n"]', 'v': '@Request["v"]' },
            add: function(e, data) {
               
                $.each(data.files,function(i,file){
                    var $row=$('<div class="row">'+
                    '<div class="col-xs-6 row-name" title="'+file.name+'">'+file.name+'</div>'+
                    '<div class="col-xs-4"><span>'+formatBytes(file.size)+'</span>/<span class="badge">0%</span></div>' +
                    '<div class="col-xs-2"><a class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></a></div>'+
                    '</div>').data("fdata",data).appendTo("#fileQueue");
                    $row.find("a").click(removeFile);
                    data.context=$row;
                    
                });
               

            },
            progress:function(e, data){
      
                if(data.context){
                   
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    var $badge=data.context.find(".badge").text(progress+"%");
                }
                
            },
            progressall: function (e, data) {
                
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#uploadbar .progress-bar').css('width',progress + '%').text(progress);

                
            },
            fail: function (e, data){
                if(data.context){
                    data.context.addClass('row-error');
                }
                $(this).attr('disabled',false); 
            },
            done: function(e, data){
                parent.uploader_addli(popupName, data.result);
                if(data.context){
                    data.context.addClass('row-success');
                }

                if($("#fileQueue").find("div.row").length==$("#fileQueue").find("div.row-success").length){
                    closeDialog();
                }
                //closeDialog();
            }
        });



        $("#btn_add").click(function(){
            
            $("#fileupload").click();
        });

        $("#btn_upload").click(function(){

            $(this).attr('disabled',true); 
            $("#fileQueue").find("div.row").each(function(i,n){
                var $n=$(n);
                if($n.is(":not(.row-success)")){
                    $(n).data("fdata").submit();
                }
               
            });
            
        });

        
    });

    function removeFile(){
   
        var $row=$(this).parent().parent();
        $row.data("fdata").abort();
        $row.remove();
    }

    function formatBytes(a,b){if(0==a)return"0 Bytes";var c=1024,d=b||2,e=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],f=Math.floor(Math.log(a)/Math.log(c));return parseFloat((a/Math.pow(c,f)).toFixed(d))+" "+e[f]}

    function closeDialog() {
        $.closeCurPopupTopWindow();
        //parent.window[uploader_winName("@ViewBag.name")].window("close");
    }
//-->
</script>
<style>
    .upload-panel { margin:5px auto 5px auto; }
    .upload-panel>div{ margin:3px auto 3px auto;}
    #fileQueue { vertical-align:middle; }
    #fileQueue .row{height:26px;}
    #fileQueue .row>div{ line-height:24px;margin-top:1px;}
    #uploadbar{margin-top:3px;}
    .row-name {
        overflow:hidden; 
        text-overflow:ellipsis;
        white-space:nowrap;
     }
     
     .row-success
     {
         color:Green !important;
     }
     .row-error
     {
         color:Red !important;
     }
</style>
<div class="upload-panel">
    <div class="container-fluid" >
        <div class="row">
            <div class="col-xs-2">
                <input id="fileupload" type="file" name="Filedata" style="display:none;" multiple />
                <button class="btn btn-success btn-sm" id="btn_add"><i class="glyphicon glyphicon-plus"></i>添加</button>
            </div>
            <div class="col-xs-10">
                <div id="uploadbar" class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                    </div>
                </div>
            </div>
        </div>
        <div id="fileQueue" class="container" style="height: 200px; overflow: auto; border: solid #d9e5ea 1px;">   
        </div>
    </div>
    <div class="container">
        <button class="btn btn-primary btn-sm" id="btn_upload" ><i class="glyphicon glyphicon-upload"></i>上传</button>
        <button class="btn btn-warning btn-sm" onclick="closeDialog();"><i class="glyphicon glyphicon-ban-circle"></i>取消</button>
    </div>
</div>