HTML实现美化上传文件样式

这篇文章介绍的内容是HTML实现美化上传文件i样式 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

<form id="upform" enctype='multipart/form-data'>    <p html' target='_blank'>class="form-group">        <label for="upteainput">上传文件</label>        <input id="upteainput" name="upfile" type="file" class="form-control-file">    </p></form>

效果如下图所示

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

<form id="upform" enctype='multipart/form-data' style="display:none;">    <p class="form-group">        <label for="upteainput">上传文件</label>        <input id="upteainput" name="upfile" type="file" class="form-control-file">    </p></form><button id="uptea" type="button" class="btn btn-primary">上传</button>

给真正的用于上传文件的Input style='display:none;'隐藏起来，然后用一个很容易控制样式的button或者p盒子等代替。当点击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();                    }                });            }        });

实际效果如下所示

相关推荐：

文件上传框样式美化

图片上传样式美化

美化上传文件框(上传图片框)

以上就是HTML实现美化上传文件样式 的详细内容，更多请关注 其它相关文章！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。