Rumah  >  Artikel  >  hujung hadapan web  >  HTML实现美化上传文件样式

HTML实现美化上传文件样式

零到壹度
零到壹度asal
2018-04-20 16:00:0310393semak imbas

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

传统写法

<form id="upform" enctype=&#39;multipart/form-data&#39;>
    <p class="form-group">
        <label for="upteainput">上传文件</label>
        <input id="upteainput" name="upfile" type="file" class="form-control-file">
    </p></form>

效果如下图所示
这里写图片描述

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

非常规写法

<form id="upform" enctype=&#39;multipart/form-data&#39; 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 != &#39;&#39;) {//要上传的文件名不为空
                $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(&#39;Error loading XML document&#39;);
                    },
                    success: function (data, status) {//如果调用php成功
                        if (data.errno != 0) {                            if (data.errmsg != &#39;&#39;) {
                                alert(data.errmsg);
                            } else {
                                alert("系统错误");
                            }
                        }
                        console.log(data);
                        alert("导入成功");
                        window.location.reload();
                    }
                });
            }
        });

实际效果如下所示

这里写图片描述


相关推荐:

文件上传框样式美化

图片上传样式美化

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

Atas ialah kandungan terperinci HTML实现美化上传文件样式 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:html如何只显示部分td文字Artikel seterusnya:再谈前端HTML模板技术