@{
    Layout = null;
}
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="@(Url.Content("~/App_Scripts/Jquery/jquery-1.10.2.min.js"))"></script>
    <script type="text/javascript" src="@(Url.Content("~/App_Scripts/Jquery/plugin/AjaxFileUploader/JQuery.JSAjaxFileUploaderSingle.js"))"></script>
    <link href="@(Url.Content("~/App_Scripts/Jquery/plugin/AjaxFileUploader/JQuery.JSAjaxFileUploader.css"))" rel="stylesheet" />
    <style type="text/css">
        #tb table {
            border-collapse: collapse;
            width: 600px;
        }

        #tb td {
            text-align: center;
            padding-top: 5px;
            width: 25%;
        }

        #tb tr {
            background-color: #E3E3E3;
            line-height: 35px;
        }

        .showImg {
            width: 50px;
            height: 50px;
        }
    </style>
    
    <script type="text/javascript">
    $(function () {
        //隐藏显示图片的表格
        $('#tbl').hide();

        $('#testId').JSAjaxFileUploader({
            uploadUrl: '@(Url.RouteUrl("Upload", new { action = "UploadFile" }))',
            inputText: '选择上传文件',
            //fileName: 'photo',
            maxFileSize: 512*1024,    //Max 500 KB file 1kb=1024字节
            allowExt: 'gif|jpg|jpeg|png',
            zoomPreview: false,
            zoomWidth: 360,
            zoomHeight: 360,
            beforesend: function (file) {
                if ($('.imgName').text() != "") {
                    deleteImg();
                    $('#tbl').hide();
                }
            },
            success: function (data) {
                $('.file_name').html(data.name);
                $('.file_type').html(data.type);
                $('.file_size').html(data.size);
                $('.file_path').html(data.path);
                $('.file_msg').html(data.msg);
                createTableTr();
                $('#tbl').show();
                $('.showImg').attr("src", data.path);
                $('.imgName').text(data.name);
            },
            error: function (data) {
                alert(data.msg);
            }
        });

        //点击删除链接删除刚上传图片
        $('#tbl').on("click", ".delImg", function () {
            deleteImg();
            //window.location.reload();
        });
    });

    //删除图片方法：点击删除链接或上传新图片删除原先图片用到
    function deleteImg() {
        $.ajax({
            cache: false,
            url: '@(Url.RouteUrl("Upload", new { action = "DeleteFileByName" }))',
            type: "POST",
            data: { name: $('.imgName').text() },
            success: function (data) {
                if (data.msg) {
                    //alert("图片删除成功");
                    $('.delImg').parent().parent().remove();

                }
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("出错了 '" + jqXhr.status + "' (状态: '" + textStatus + "', 错误为: '" + errorThrown + "')");
            }
        });
    }

    //创建表格
    function createTableTr() {
        var table = $('#tbl');
        table.append("<tr><td><img class='showImg'/></td><td colspan='2'><span class='imgName'></span></td><td><a class='delImg' href='javascript:void(0)'>删除</a></td></tr>");
    }
    </script>
</head>
<body>
    <div id="testId"></div>

    <div id="tb" class="tb">
        <table id="tbl">
            <tbody></tbody>
        </table>
    </div>
    <div class="file_name"></div>
    <br />
    <div class="file_type"></div>
    <br />
    <div class="file_size"></div>
    <br />
    <div class="file_path"></div>
    <br />
    <div class="file_msg"></div>
</body>
</html>