JS上传Excel文件到服务器(Layui)

*JS上传Excel文件

1.控件呈现

<div class="layui-input-inline">
    <input type="text" name="bb_1" id="bb_1" readonly="true" style="height: 30px; width: 450px;">
</div>
<div class="layui-input-inline">
    <input type="file" id="file_b" style="height: 30px; width: 300px;" onchange="file_b_change();">
</div>
<div class="layui-inline">
    <button class="layui-btn layui-btn-sm" id="btnUpload_Excel" style="width: 150px">数据上传 </button>
</div>

2.JS代码

<script type="text/javascript">
    var uid = "";
    layui.use(['layer', 'form', 'table'], function () {
        var layer = layui.layer,
            form = layui.form;
        $ = layui.jquery;
        var table = layui.table;
        
        $("#btnUpload_Excel").on("click", function () {
            BtnUpload_Excel(table);
        });
    });

//文件路径文本框赋值
function file_b_change() {
        $("#bb_1").val($("#file_b").val());
}
    
function BtnUpload_Excel(table) {
        var path = $('#bb_1').val();
        if ($.trim(path) == "") { layer.msg("请选择要上传的文件"); return; }
        
        var _file = $('#file_b');
        var files = document.getElementById("file_b").files;

        var form_data = new FormData();
        // 获取文件
        var file_data = $("#file_b").prop("files")[0];
        form_data.append("uid", uid);//操作人(全局)
        form_data.append("excel", file_data);

        $.ajax({
            url: '/XXXXXX/UploadExcelFile',//API接口
            type: 'post',
            dataType: 'json',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (data) {

                var rel = data.tc;
                if (rel == 'OK') {
                    //清理控件
                    $('#bb_1').val('');
                    var test = document.getElementById('file_b');
                    test.value = '';

                    layer.msg('上传成功!');

                } else {
                	//清理控件
                    $('#bb_1').val('');
                    var test = document.getElementById('file_b');
                    test.value = '';
                    layer.msg(rel);
                }
            },
            error: function (err) {
	            //清理控件
                $('#bb_1').val('');
                var test = document.getElementById('file_b');
                test.value = '';
                layer.alert(err);
            }
        });

    }
</script>

3.后台接收

		[HttpPost]
        public ActionResult UploadExcelFile()
        {
            var rel = new { tc = "" };//根据需要赋值
            var uid = Request.Form["uid"];
            //获取文件
            var fileNames = Request.Files["excel"]; 

            if (string.IsNullOrEmpty(fileNames.ContentLength.ToString()))
            {
                rel = new { tc = "请选择上传文件" };
                return Content(JsonConvert.SerializeObject(rel));
            }

            Thread.Sleep(200);
            decimal size = Math.Round(decimal.Parse(fileNames.ContentLength.ToString()) / 1024 / 1024, 2, MidpointRounding.AwayFromZero);//换算文件大小(单位:M)
            if (size > 6)
            {
                rel = new { tc = "文件过大,请上传小于6M文件!" };
                return Content(JsonConvert.SerializeObject(rel));
            }

            var fileName = Path.GetFileName(fileNames.FileName);
            string path = fileName;

            string file_name = fileName.Substring(0, fileName.LastIndexOf("."));
            string file_format = fileName.Substring(fileName.LastIndexOf("."));

            if (file_format != ".xls" && file_format != ".xlsx")
            {
                rel = new { tc = "请上传Excel格式文件!" };
                return Content(JsonConvert.SerializeObject(rel));
            }

            DateTime nowTime = DateTime.Now;
			//原文件名 + “_” + 时间戳 + 用户ID + 文件格式(根据需要自定义)
            string NewFileName = file_name + "-" + nowTime.ToString("yyMMddHHmmss") + "-" + uid + file_format;
            path = Path.Combine(Server.MapPath("/服务器站点根目录下文件夹名称/"), NewFileName);
            try
            {
            	fileNames.SaveAs(path);
            }
            catch (Exception ex)
            {
                rel = new { tc = "上传异常:" + ex.Message };
                return Content(JsonConvert.SerializeObject(rel));
            }
            //1.SaveAs不抛异常可以一定程度上认为成功;
            //2.或检查文件是否存在 File.Exists(path)。
            rel = new
            {
                tc = "OK";
            };
            return Content(JsonConvert.SerializeObject(rel));

        }


layui是一个轻量级的前端UI库,它提供了一些方便的功能组件,包括文件上传。要实现Excel文件上传并在layui中显示结果,可以按照以下步骤操作: 1. 引入layui和相关插件:首先在HTML中引入layui的CSS和JavaScript文件,并且可能需要一个用于处理文件上传的插件,如layui的uploader组件。 ```html <link rel="stylesheet" href="https://www.layui.com/static/css/layui.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script> <!-- 如果使用uploader插件 --> <script src="https://www.layui.com/static/modules/uploader/layui.uploader.min.js"></script> ``` 2. 初始化upload组件:在JS部分,初始化一个Uploader实例,设置允许上传文件类型为Excel(`.xls`或`.xlsx`),以及接收文件后的处理函数。 ```javascript layui.use(['upload'], function () { var upload = layui.upload; upload.render({ elem: '#upload-file', // 上传容器ID url: 'your-server-url-to-upload-excel', // 文件上传服务器地址 accept: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // 可接受的文件类型 success: function (res, file) { // 成功回调 if (res.code === 0) { // res.data通常包含文件信息,你可以在这里解析数据并显示在页面上 console.log(res.data); // 显示上传成功的提示信息 layer.msg('文件上传成功,ID:' + res.data.id); // 或者将数据存入数据库,然后获取数据显示 } else { layer.alert(res.message); } }, error: function (err, file) { // 错误回调 layer.alert(err.message); } }); }); ``` 3. 创建HTML元素展示结果:在HTML结构中,你可以创建一个区域来显示上传的结果,比如表格或者其他形式。 ```html <div id="upload-file">点击选择文件</div> <div id="result-container"></div> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值