@{
    Layout = "~/Views/Shared/_LayoutTable.cshtml";
}
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <table class="table table-bordered table-striped table-hover" style="height: inherit;">
            <tr style="height: 80%;">
                <td style="text-align: left;">
                    <div style="width:120px;height:50px;padding:0px;border:0px solid red" class="btn btn-default">
                        <input type="file" id="fileImg" style="position:relative;opacity:0;width:inherit;height:inherit;z-index:5;" />
                        <div style="position:relative;width:inherit;height:inherit;margin-top:-50px;z-index:2;">
                            <span class="glyphicon glyphicon-folder-open" style="line-height:50px;">选择上传文件</span>
                        </div>
                    </div>
                </td>
                <td style="text-align: right;"><button id="btnUpload" class="btn">开始上传</button></td>
            </tr>
        </table>
        <img id="thelist" />
    </div>
</div>
<script type="text/javascript">
    var img = "";
    $("#fileImg").on("change", function () {
        var file = document.getElementById("fileImg").files[0];
        ImgYulan(file, "thelist");
    })
    function ImgYulan(file, id) {
        if (!/image\/\w+/.test(file.type)) {
            layer.msg("请选择图片文件", { icon: 2, time: 2000 });
            return false;
        }
        console.log(document.getElementById("fileImg"));
        console.log(file);
        console.log("file-size=" + file.size);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");
            var img = document.getElementById(id);
            img.src = e.target.result;
            img.width = 200;
            img.height = 200;
            img.title = file.name;
        }

    }
</script>