阅读背景:

用jQuery-File-Upload上传Excel文件(ASP.NET MVC)[附源码下载]

来源:互联网 

MVC的cshtml部分:

@{
    ViewBag.Title = "djk8888";
}
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.min.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/vendor/jquery.ui.widget.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.iframe-transport.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.fileupload.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.fileupload-process.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.fileupload-validate.js"></script>
<link href="/go.html?url=~/jQuery-File-Upload-8.8.5/css/jquery.fileupload-ui.css" rel="stylesheet" />
<style type="text/css">
    .bar {
        height: 18px;
        background: green;
    }
</style>
<script>
    $(function () {
        $('#fileupload').fileupload({
            url: "/Home/UploadFiles",
            dataType: 'json',
            replaceFileInput: false,//显示已选择文件文件名(必须)
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css('width', progress + '%');
            },
            add: function (e, data) {
                //判断文件类型,此例限制为:Excel文件
                var fileType = data.files[0].name.split('.').pop();
                var acceptFileTypes = /xls|xlsx$/i;
                if (!acceptFileTypes.test(fileType)) {
                    $("#startBtn").hide();//隐藏上传按钮
                    alert("不支持的文件类型,仅支持EXCEL文件");
                    return;
                }
                //判断文件大小,此例限制为:1mb:
                var size = data.files[0].size;
                size = (size / 1024).toFixed(2);//文件大小单位kb
                var maxFileSize = 1024;//1mb=1024kb
                if (size > maxFileSize) {
                    $("#startBtn").hide();//隐藏上传按钮
                    alert("文件大小:" + size + "KB,超过最大限制:" + maxFileSize + "KB");
                    return;
                }
                $("#startBtn").show();//显示上传按钮
                //点击上传按钮开始上传
                data.context = $('#startBtn').click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
            },
            done: function (e, data) {
                data.context = $('<p/>').text("文件上传成功!").replaceAll($(this));
            },
            change: function (e, data) {
                if (data.files.length > 1) {
                    $("#startBtn").hide();//隐藏上传按钮
                    alert("只能选择1个文件");
                    return false;
                }
            },
            drop: function (e, data) {
                if (data.files.length > 1) {
                    $("#startBtn").hide();//隐藏上传按钮
                    alert("只能选择1个文件");
                    return false;
                }
            },
        });
    });

</script>
<h2>用jQuery-File-Upload上传Excel文件(ASP.NET MVC)</h2>
<input id="fileupload" type="file" name="multiFiles" multiple />
<button id="startBtn" style="display:none;">上传</button>
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>@{
    ViewBag.Title = "d



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: