【HTML】上传文件input样式美化

Love The Way You Lie 2022-05-27 12:57 1135阅读 0赞

起因，最近因为一些原因，在写一个前端小页面，但是上传文件的样式怎么调整都不是很满意。遂转变思维想到了如下方法。

# 传统写法 #

效果如下图所示  
![这里写图片描述][70]

这个样式调整了很长时间，最后结果都不尽人意。

# 非常规写法 #

给真正的用于上传文件的Input `style='display:none;'`隐藏起来，然后用一个很容易控制样式的button或者div盒子等代替。当点击button的时候，同时用js触发点击那个用于上传文件的input即可。

$("#uptea").click(function () {
        
        $("#upteainput").click();
    });
    
    //下面是ajax上传文件的代码，此处就不做过多讲解。 
    $("#upteainput").change(function () {
        //如果上传文件的input内容发生了变化
                $val = $("#upteainput").val();
                if ($val != '') {
       //要上传的文件名不为空
                    $data = new FormData($("#upform")[0]);//创建一个formdata对象
                    $host = window.location.host;
                    $.ajax({
                        url: "http://" + $host + "/home/front/up-tea",
                        type: "POST",
                        data: $data,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        error: function () {
        
                            alert('Error loading XML document');
                        },
                        success: function (data, status) {
        //如果调用php成功
                            if (data.errno != 0) {
                                if (data.errmsg != '') {
                                    alert(data.errmsg);
                                } else {
                                    alert("系统错误");
                                }
                            }
                            console.log(data);
                            alert("导入成功");
                            window.location.reload();
                        }
                    });
                }
            });

实际效果如下所示

![这里写图片描述][70 1]

[70]: /images/20220527/07df2a90876847d09c0bf1ec78bda4c5.png
[70 1]: /images/20220527/a4a7dc5a769346fb9777f9ded4194301.png