带进度条上传

[html]代码库

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_FormLayoutPage.cshtml";
}
<style>
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td 
    {
        border: 1px solid #ddd;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }   
</style>
<form method="post" class="pageForm" action="@Url.Action("Create", "UploadFile", new {  fileid= ViewBag.fileid, id = ViewBag.LabelInfo,dictid=ViewBag.DictId})" enctype="multipart/form-data">
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <td class="td-title">
                    <label class="control-label">文件上传</label>
                </td>
                <td class="td-contain">
                    <a href="javascript:;" class="file easyui-linkbutton" data-options="iconCls:'icon-save'">
                        选择文件
                        <input type="file" name="UploadFile" id="UploadFile" onchange="fileSelected();" />
                    </a>
                    <a id="uploadFile" style=" display:none" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="uploadFile()">
                        上传并导入
                    </a>
                    <label id="extension" class="">支持的格式有(jpg,jpeg,png,bmp,gif,pdf,doc,docx)</label>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <label class="control-label">上传进度</label>
                </td>
                <td class="td-contain">
                    <div id="progressNumber" class="easyui-progressbar" style="width: 400px;"></div>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <label class="control-label">附件名称</label>
                </td>
                <td class="td-contain">
                    <div id="fileName"style="padding: 10px">@ViewBag.filename</div>
                </td>
            </tr>
            @*<tr>
                <td class="td-title">
                    <label class="control-label"></label>
                </td>
                <td class="td-contain">                  
                    <a id="download" href="@ViewBag.fileurl" class="file easyui-linkbutton" data-options="iconCls:'icon-search'" >
                        下载                       
                    </a>
                    <a id="delete" href="#" class="file easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteFile()">
                        删除
                    </a>
                </td>
            </tr>*@
        </tbody>
    </table>




</form>
<script language="javascript" type="text/javascript">
    var FileType;
    var str;
    var type = "@ViewBag.DictId.ToString()";
    $(document).ready(function () {
        if( type =="acd54fa1-6568-4c20-890f-b9f36678e671")
        {
            $("#extension").html("支持的格式有(pdf,doc,docx)");
            str= $("#extension").html().toString();
            FileType=[".pdf", ".doc", ".docx"];
        }
        if (type == "487b4083-246e-44bc-a44a-86aa6d6c5dd6") {
            $("#extension").html("支持的格式有(pdf,doc,docx,jpg)");
            str = $("#extension").html().toString();
            FileType = [".pdf", ".doc", ".docx", ".jpg"];
        }

    });
    function fileSelected() {
        var file = $("#UploadFile").val();
        console.log(file);
        var file_name = file.substring(file.lastIndexOf('\\') + 1, file.lastIndexOf('.'));
        var file_typename = file.substring(file.lastIndexOf('.'), file.length);

        if ($.inArray(file_typename, FileType) >= 0) {//这里限定上传文件文件类型
            if (file) {
                $("#uploadFile").show();
                document.getElementById('fileName').innerHTML = file_name;
            }

        }
        else {
            $("#uploadFile").hide();
            document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是" + str.substr(str.indexOf("(") + 1, str.indexOf(")") - str.indexOf("(") - 1) + "后缀而不应该是" + file_typename + ",请重新选择文件</span>"
        }

    }


    function uploadFile() {
        $(".pageForm").ajaxSubmit({
            dataType: 'json',
            beforeSend: function () {
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                $('#progressNumber').progressbar('setValue', percentComplete);
            },
            success: function (evt) {
                if (evt != null) {
                    if (evt.Success) {
                        top.$('#FileDialog').attr("returndata", JSON.stringify(evt));
                        var dialog = top.$('#FileDialog').dialog();
                        dialog.dialog('close');
                    }
                    else {
                        top.$.messager.alert('上传失败', evt.Message, 'info');
                    }
                }
            },
            error: function (evt) {
                top.$.messager.alert('上传出错', evt.Message, 'info');

            }
        });
    }

    @*function deleteFile()
    {
        var url="@Url.Action("RemoveNew", "UploadFile", new { id = ViewBag.fileid })";
        top.$.messager.confirm('删除询问', '您确定要删除附件？', function (r)
        {
            if (r)
            {
                $.post(url, function (result)
                {
                    if (!result.Success) {
                        top.$.messager.alert('操作提示', result.Message, 'error');
                    }
                    else {
                        top.$.messager.alert('操作提示', "操作成功！", 'info');
                        document.getElementById('fileName').innerHTML = "";
                    }
                }, 'json');
            }
        });
     }*@


</script>

[源代码打包下载]