文件上传框

最新推荐文章于 2023-10-18 17:18:29 发布
最新推荐文章于 2023-10-18 17:18:29 发布
阅读量248 收藏
点赞数
分类专栏： CSS样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41617901/article/details/108167409
版权

 效果图：

http://218.200.85.76:8557/DataStatistics/DynamicUnemployment

<form id="Excelform" method="post"  enctype="multipart/form-data" style="display: inline-block;">
    <div class="excelupload" style="display:none;z-index:101;">
        <div class="excelHead">
            <label style="float:left;color: #49d6ff;font-size: 18px;font-weight: bold;margin-left:158px; margin-top:20px;">数据导入</label>
            <img src="~/Scripts/statics/images/X.png" style="float:right; margin-top:4px;margin-right:4px;opacity:.5; cursor: pointer;" id="close_btn" />
        </div>
        <div class="set_date">
            <label>选择时间：</label>
            <input type="text" class="select_butn layui-input" style="font-size:14px;text-align:left;opacity:.7;border:1px solid #2D9EF3;" id="useDate" name="UCE512" value="" readonly required placeholder="日期" />
        </div>
        <div class="upload_file">
            <input type="file" class="filess" id="attend-files" style="display:none;" name="File"  value=" " onchange="addFiles();" />
            <label class="filetext" style="color:white;font-size:14px;width:30px;">选择文件：</label>
            <u class="change_btn" style="color:white;cursor:pointer;"   onclick="try{change_btn_click()}catch(e){alert(e)}" >上传文件</u>
        </div>
        <div class="file_import" style="margin-left: 160px;"><button type="button" onclick="btnClick();">导入</button> </div>
    </div>
</form>
<!--提示框-->
<div id='promptDiv' style="display:none;z-index:201;height:198px;width: 377px;
		 border: 1px #4075D4 solid;background-color: #011F60; position: fixed;
         left: 50%;top: 40%; transform: translate(-50%, -50%);">
    <div id='header_prompt' style='height: 55px;'><lable style='font-size:20px;font-weight: bold;margin-left:152px; margin-top:12px;color:#C80925;height:26px;display:inline-block;padding-top:0'>导入失败！</lable><img /></div>
    <div id='body_prompt' style='height: 90px;'><label style="color:white;margin-left:96px;font-size:16px;margin-top:0;display:inline-block">导入成功</label></div>
    <div id='body_prompt'>
        <button id='confirm' style='width: 63px; height: 29px; color: white;border: 1px solid #2D9EF3;
             border-radius:5px;text-decoration:none; outline:none;cursor:pointer;background-color:#2D9EF3 ;margin-left: 158px;' onclick="hiddenDialog_Click();">
            确 定
        </button>
    </div>
</div>
/*被弹出的div*/
.excelupload {
    border: 1px #4075D4 solid;
    background-color: #011F60;
    border-radius: 10px;
    width: 377px;
    height: 198px;
    /*让其浮在最上面*/
    position: fixed;
    display: none;
    /*设置弹出的div窗口位置*/
    left: 40%;
    top: 30%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index:100;
}

.excelupload .excelHead {
        height: 59px;
    }

.excelupload .set_date label {
        margin-left: 86px;
        color: white;
        font-size: 14px;
        width: 30px;
    }

.excelupload .upload_file #up_file {
        margin-left: 25px;
    }

.excelupload .upload_file {
        margin-top: 20px;
        margin-left: 86px;
    }

.excelupload .file_import {
        margin-top: 20px;
        margin-left: 100px;
        clear: both;
    }

.excelupload .file_import button {
         width: 63px;
         height: 29px;
         color: white;
         border: 1px solid #2D9EF3;    
         border-radius:5px;  
         text-decoration:none;
         outline:none;
         cursor:pointer;
        }
#close_btn:hover{
    opacity:1;
}
 u {
	width: 100%;
    opacity:.7;
    word-wrap: break-word;
    text-align: justify;
	line-height: 200%;
	text-decoration: none;
    border-bottom: 1px solid #2D9EF3;			
}        
//统计字段
var field1, field2, field3, field4, field5, field6, field7, field8, field9, field10, field11
var slideTime = null;
//数据源对象
var dataObj = {
    fexl1: "",
    fexl2: "",
    fexl3: "",
    fexl4: "",
    fexl5: "",
    fexl6: "",
    fexl7: "",
    fexl8: "",
    fexl9: "",
    fexl10: "",
    fexl11: 0,
    fexl12: "",
    fexl13: "",
    realTimeDatas: "",
    chartData1: "",
    chartData2: "",
    chartData3: "",
    comNewData: "",
    jobFairDatas: "",
    silde: true,
    silde2: true
}

var dataStatistics = {
    myChart5: null,
    //展示统计图表
    showChart: function () {
        var textdatas = [], datas1 = [], datas2 = [], datas3 = [];
        try {
            $.ajax({
                url: "http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/BasicInfo",
                type: "GET",
                data: {
                    AAB301: region,
                    UCE512: ny
                },
                dataType: "json",

                success: function (data) {
                    var str1 = 300, str2 = 400, str3 = 500;
                    for (var i = 0; i < 10; i++) {
                        str1 = str1 + 15;
                        str2 = str2 + 15;
                        str3 = str3 + 15;
                        var tostr1 = str1.toString();
                        var tostr2 = str2.toString();
                        var tostr3 = str3.toString();
                        textdatas.push("2020-8");//设置时间
                        datas1.push({ name: "在岗人数", value: tostr1 });
                        datas2.push({ name: "缺工人数", value: tostr2 });
                        datas3.push({ name: "招用人数", value: tostr3 });
                    }
                    dataStatistics.setChartLine(textdatas, datas1, datas2, datas3);

                },
                error: function (error) {

                }


            })
        }
        catch (e) {

        }
       
    },
    setChartLine: function (textdatas, datas1, datas2, datas3) {
        var option2 = {
            legend: {
                top: "30px",
                right: "20px",
                data: [{
                    name: datas1[0].name, textStyle: {
                        color: '#D66B4F'
                    }
                }, {
                    name: datas2[0].name, textStyle: {
                        color: '#157BB6'
                    }
                }, {
                    name: datas3[0].name, textStyle: {
                        color: '#F9B636'
                    }
                }]

            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#3486DA',
                        width: '1'
                    }
                },
                axisLabel: {
                    interval: 0,
                    rotate: 45,
                    textStyle: {
                        color: "#65C6E7",
                        fontSize: 12
                    }
                },
                data: textdatas
            },
            tooltip: {
                backgroundColor: "#00B7B8",
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {    //文字样式
                        color: "#65C6E7",
                        fontSize: 11
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#3486DA',
                        width: '1'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: ['#315070'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                data: datas1,
                name: datas1[0].name,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: "#D66B4F",
                    }
                }
            },
            {
                data: datas2,
                type: 'line',
                name: datas2[0].name,
                itemStyle: {
                    normal: {
                        color: "#157BB6",
                    }
                }
            },
            {
                data: datas3,
                type: 'line',
                name: datas3[0].name,
                itemStyle: {
                    normal: {
                        color: "#F9B636",
                    }
                }
            }
            ]
        };
        option2.color = ["#D66B4F", "#157BB6", "#F9B636"];
        dataStatistics.myChart5.setOption(option2);

    },
    //页面初始化
    init: function () {
        dataStatistics.myChart5 = echarts.init(document.getElementById('main2'));
        dataStatistics.showChart();
    },
}

$(function () {
    dataStatistics.init();
    $(".city").click(function () {
        if ($(this).attr("state") == "true") {
            $(this).attr("state", "false");
            $(".cityclick").css({ "left": $(this).position().left + "px" });
            $(".cityclick").show();
        } else {
            $(this).attr("state", "true");
            $(".cityclick").hide();
        }
    });

    $(".cityclick div").click(function () {
        $(".city").attr("state", "true");
        //localStorage["city"] = $(this).attr("value");
        $("#cityname").text($(this).text());
        $("#cityname").attr("city", $(this).attr("value"))
        $(".cityclick").hide();
        dataStatistics.showChart();
    });

    //数据导入点击事件
    $(".dataimport").click(function () {
    
        $(".excelupload").show();
        insertMaskLayer('#maskDiv1', 'maskDiv1', 100, false);

    });
    $("#close_btn").click(function () {
      
        $(".excelupload").hide();
        insertMaskLayer('#maskDiv1', 'maskDiv1', 100, true);

    });
    //$(".change_btn").click(function () {
    //    $(".filess").click();
    //});
    laydate.render({
        elem: '#date_value',
        type: 'month',
        done: function () {
            setTimeout(function () { dataStatistics.statistics(); }, 500);
        }
    });
    laydate.render({
        elem: '#useDate',
        type: 'month'
    });
    //插入数据
    appendData();
    rollNum();
    //showAuto();
});

//取文件全名名称
function GetFileName(filepath) {
    if (filepath != "") {
        var names = filepath.split("\\");
        return names[names.length - 1];
    }
}
//插入数据
function appendData() {
    try {
        $.ajax({
            url: "http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/BasicInfo",
            type: "GET",
            data: {
                AAB301: region,
                UCE512: ny
            },
            dataType: "json",

            success: function (data) {

                for (var i = 0; i < 10; i++) {
                    $("#datalistview1 li").eq(i).find(".fexd1").text("荆门市熊兴化工有限公司");
                    $("#datalistview1 li").eq(i).find(".fexd2").text("荆门市");
                    $("#datalistview1 li").eq(i).find(".fexd3").text("265");
                }

            },
            error: function (err) {
                // 
                console.log("_________error____________");
            },

        }
        );

    }
    catch (e) {

    }
}
var count = 0;
//数字滚动效果
function rollNum() {
    setInterval("showAuto()", 30000);
}
function showAuto() {
    //推荐岗位查看数
    
    try{
        //取地区 年月
        var region = $("#cityname").text();
        var ny = $("#date_value").val();
        if (ny == "") {
            ny = doHandleDate();
        }
        $.ajax({
            url: "http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/BasicInfo",
            type: "GET",
            data: {
                AAB301: region,
                UCE512: ny
            },
            dataType: "json",
            
            success: function (data) {
               
               
                $("#fexl1").rollNum({
                    deVal: parseInt(count)
                });
                $("#fexl2").rollNum({
                    deVal: parseInt(count)
                });
                $("#fexl3").rollNum({
                    deVal: parseInt(count)
                });
                $("#chNum1").rollNum({
                    deVal: parseInt(count)
                });
                $("#chNum2").rollNum({
                    deVal: parseInt(count)
                });
                $("#chNum3").rollNum({
                    deVal: parseInt(count)
                });

            },
            error: function (err) {
                // 
                console.log("_________error____________");
            }
        });


    }
    catch (e) {

    }


}
function addFiles(){
        var file = document.getElementById("attend-files").files;
        var filename = file[0].name;
        var filetext = filename.substring(filename.lastIndexOf("."), filename.length)
        filetext = filetext.toLowerCase();
        if (filetext != '.xls' && filetext != '.xlsx') {
            promptDialog("文件格式错误！")
            RevertUploadFileInput();
            return;
        }
        var filesize = file[0].size;
        if (filesize > 1024 * 1024 * 200) {
            console.log("文件大小不能超过200M");

            return;
        }
        var file = $('.filess').val();
        var str = GetFileName(file);
        if (str.length > 15) {
            var short= str.replace(/^(^.{8})(.+)(.{2}\.+\w+$)$/g, "$1...$3");
            $('.change_btn').text(short);
        }
        else {
            $('.change_btn').text(str);
        }
}
function FileUpload () {
    //SystemNotice.show({
    //    systitle: "温馨提示", systext: "正在上传",
    //});
    console.log("正在上传中");
    //表格上传    
    var options = {
        type: "post",
        url: 'http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/UploadExcel',
        success: function (resultjson) {
            console.log(resultjson);
            if (resultjson.IsOK) {
                if (resultjson.RowCount == "0") {
                    console.log("表中没有数据!");
                }
                console.log("上传成功");
                //上传成功后 把控件还原初始状态
                //按钮变色
                $('#useDate').attr('value', '');
                $('.filess').attr('value', '');


            } else {
                //上传失败后 把控件还原初始状态


                if (resultjson.Message != null || resultjson.Message != "" || resultjson.Message != undefined) {
                    //SystemNotice.show({
                    //    systitle: "温馨提示", systext: resultjson.Message,
                    //});
                } else {
                    //SystemNotice.show({
                    //    systitle: "温馨提示", systext: "上传失败！",
                    //});
                }
            }
        }

    };
    $("#Excelform").ajaxForm(options).submit();
}
//提交表单
function btnClick()
{
    //年月和文件不能为空
    var ym = $('#useDate').val();
    var file = $('.filess').val();
    if (ym === "" || file === "") {
        promptDialog("请填写完整!");
        insertMaskLayer('#maskDiv2', 'maskDiv2', 200, false);
        return;
    }
    //调用文件上传
    FileUpload();
}
function doHandleDate() {
    var myDate = new Date();
    var tYear = myDate.getFullYear();
    var tMonth = myDate.getMonth();

    var m = tMonth + 1;
    if (m.toString().length == 1) {
        m = "0" + m;
    }
    return tYear + '-' + m;
}
//提示框
function promptDialog(str) {
    $('#promptDiv').show();
    $('#promptDiv #body_prompt label').text(str);
}
function hiddenDialog_Click() {
    $('#promptDiv').hide();
    insertMaskLayer('#maskDiv2', 'maskDiv2', 200, true);
}
function insertMaskLayer(eleNameById, eleName, zIndex, isRemove) {
    if ($(eleNameById).length > 0) {
        if (isRemove) {
            $(eleNameById).remove();
        }
        return;
    }
    if (!isRemove) {
        var sWidth, sHeight;
        sWidth = document.body.offsetWidth;
        sHeight = screen.height;
        var bgObj = document.createElement("div");
        bgObj.setAttribute('id', eleName);
        bgObj.style.position = "absolute";
        bgObj.style.top = "0";
        bgObj.style.background = "rgba(0,0,0,0.5)";
        bgObj.style.filter = "alpha(opacity=50);";
        bgObj.style.opacity = "0.5";
        bgObj.style.left = "0";
        bgObj.style.width = sWidth + "px";
        bgObj.style.height = sHeight + "px";
        bgObj.style.zIndex = zIndex;
        document.body.appendChild(bgObj);
    }
};
function change_btn_click() {
    console.log('changebtnclick');
    $(".filess").click();
}
function RevertUploadFileInput() {
    $(".upload_file").html('');
    var htmls = '';
    htmls = ' <input type="file" class="filess" id="attend-files" style="display:none;" name="File"  value=" " onchange="addFiles();" />';
    htmls += ' <label class="filetext" style="color:white;font-size:14px;width:30px;">选择文件：</label>';
    htmls += '<u class="change_btn" style="color:white;cursor:pointer;" onclick="try{change_btn_click()}catch(e){alert(e)}"   >上传文件</u>';
    $(".upload_file").html(htmls);
}

碧山云游
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文件上传
Just The Way You Are
12-11 551
文件上传：要将客户端（浏览器）大数据存储到服务器端，不将数据直接存储到数据库中，而是要将数据存储到服务器所在的磁盘上，这就要使用文件上传。 关于文件上传的例子在应用中非常常见，就比如很多网站的上传头像，则属于图片上传，还有些可以上传word或者Excel文件等等。 服务器端通过request对象获取输入流从而将浏览器上传的数据读取出来，实现文件的上传。 文件上传的三要素： 1.表单提交必须是p
关于input file上传文件弹出框的默认格式的相关问题
笑到世界都狼狈的博客
04-21 1889
input file文件上传的默认弹框是全部文件，但是有时候在写项目的时候为了方便会让其默认选中xls文件或者 图片，因此需要对其添加一个accept来实现这个功能 具体代码如下： <!-- 默认全部 --> <input type="file" name=""> <!-- 默认xls --> <input type="file" accept="a...
自己手写一个文件上传框
qq_32426091的博客
10-18 97
一个正方形，里面是一个十字架，点击正方形任何地方，弹出文件上传框。
input type=“file“ 文件上传类型输入框样式修改方法
qq_39111074的博客
04-28 1516
input type="file" 文件上传类型输入框样式修改方法
使用HTML自定义图片上传框
qq_59843674的博客
09-05 855
最近需要用到图片上传的，本身又不是基于第三方框架做的，再加上第三方的不好修改样式，就直接用HTML做一个图片上传，原生的又太丑了，所以想搞个好看的。如图所示，所有样式都是自定义的，也可以实现图片上传的功能，不过想要回显图片的话，需要先上传到服务器上再回显，或许还有其他的方法，暂时还没尝试。
Vue3 + Element UI 实现文件上传弹出框
w1060436872的博客
02-13 3034
Vue3 + Element UI 实现文件上传
文件上传框样式
04-20
"文件上传框样式"这个主题关注的是如何在网页设计中优化这个过程，使其既美观又实用。通常，这涉及到HTML、CSS以及可能的JavaScript技术的运用。 在HTML中，`<input type="file">`标签是创建文件上传框的基础。这个...
qt 自定义实现文件选择框
最新发布
10-31
本篇文章将详细讲解如何在Qt中自定义实现一个文件选择框，并修改其样式以保持与桌面应用的整体设计一致。 首先，我们需要了解Qt中的QFileDialog类，它是用于打开和保存文件的标准对话框。然而，QFileDialog的默认...
jQuery页面弹出框实现文件上传
10-20
此外，页面弹出框实现文件上传的过程中，还可能涉及到一些动态行为，比如弹出框的定位和大小调整、在弹出框中嵌入第三方控件（例如日期选择器）以及动画效果的实现等，这些都可以通过jQuery提供的丰富API进行实现。...
文件上传+自定义上传文本框
06-02
文件上传+自定义上传文本框 文件上传+自定义上传文本框
利用javascript向网页中动态添加文件上传框
02-06
可以实现动态向网页中添加文件上传框，希望大家能用得上！
Python Web框架之Django框架文件上传功能详解
09-18
文件上传功能是Web开发中的一个常见需求。Django为文件上传提供了全面的支持，允许开发者通过多种方式实现文件的上传与处理。 首先，在创建Django项目时，可以通过创建一个表单来上传文件。传统的文件上传是通过...
Spring框架实现文件上传功能
08-28
Spring框架实现文件上传功能 Spring框架是 Java 企业级应用程序的开发框架，提供了多种功能模块，其中包括文件上传功能。本文将详细介绍如何使用 Spring 框架实现文件上传功能。 文件上传的需求 在 Web 应用程序中...
文件上传框、多行文本框（文本域）、下拉选择框、按钮
weixin_48494427的博客
03-01 556
文件上传框、多行文本框（文本域）、下拉选择框、按钮
前端样式之自定义弹窗，上传文件框的默认样式修改，div渐变色设置
weixin_41897122的博客
03-03 1194
写在前面 前端的CSS样式繁多,关联性又不大,让前端的小伙伴们头皮发麻,我也是其中之一,有空将用到的有趣又容易忘记的CSS样式做一个总结归纳,(其中很多是前辈的总结)方便自己以后查找用,当然如果能帮到各位一二,亦不胜荣幸 1.遮罩层.我用于做自定义弹窗,简单快速,再ajax传输也不影响原网页刷新,方法如下: <div id="zhezhao"> <div id="tanchua...
​​ 技术分享 | web自动化测试-文件上传与弹框处理
软件测试小迷糊
05-17 398
原文链接 实战演示 文件上传 input 标签使用自动化上传，先定位到上传按钮，然后 send_keys 把路径作为值给传进去. 如图所示，是企业微信文件上传的页面 定位到标签为 input，type 为 file 的元素信息，然后使用 send_keys 把文件路径作为值给传进去。 Python 版本 driver.find_element(By.CSS_SELECTOR, "#js_upload_input")\ .send_keys("./hogwarts.png") Java 版
upload上传组件点击上传按钮，弹出文件框前出现提示框
ha_ha_en的博客
09-29 1481
选择文件前，需要询问用户此次选择的文件是否为证书，若是，就会新加一个字段。
美化上传文件框(上传图片框)
luoxuehui_blog的博客
01-25 8893
传统的表单控件十分简陋，可以说是很难看，那怎么办？ 方法:我们自己做一个好看的样式出来，用各种标签啊，css啊，是可以做到的。如图: 做出这样一个样子应该是很简单的，但是怎么让他具有上传的功能的呢？ 那就使用代理的方法，点击上传就等于点击(上传文件表单控件) 废话不多说，直接上代码: html: 测试插件 body{font
用bootstrap写一个文件上传框
06-06
好的，下面是一个简单的文件上传框的 Bootstrap 代码： ``` 选择文件 上传 ``` 需要注意的是，`enctype` 属性设置为 `multipart/form-data`，这是文件上传必须的。另外，需要将 `input` 元素的 `type` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值