HTML實(shí)現(xiàn)美化上傳文件樣式的案例

小編給大家分享一下HTML實(shí)現(xiàn)美化上傳文件樣式的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

傳統(tǒng)寫法

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

效果如下圖所示

這個(gè)樣式調(diào)整了很長時(shí)間，最后結(jié)果都不盡人意。

非常規(guī)寫法

<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;'隱藏起來，然后用一個(gè)很容易控制樣式的button或者p盒子等代替。當(dāng)點(diǎn)擊button的時(shí)候，同時(shí)用js觸發(fā)點(diǎn)擊那個(gè)用于上傳文件的input即可。

$("#uptea").click(function () {
    $("#upteainput").click();
});//下面是ajax上傳文件的代碼，此處就不做過多講解。 $("#upteainput").change(function () {//如果上傳文件的input內(nèi)容發(fā)生了變化
            $val = $("#upteainput").val();            if ($val != '') {//要上傳的文件名不為空
                $data = new FormData($("#upform")[0]);//創(chuàng)建一個(gè)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) {//如果調(diào)用php成功
                        if (data.errno != 0) {                            if (data.errmsg != '') {
                                alert(data.errmsg);
                            } else {
                                alert("系統(tǒng)錯(cuò)誤");
                            }
                        }
                        console.log(data);
                        alert("導(dǎo)入成功");
                        window.location.reload();
                    }
                });
            }
        });

實(shí)際效果如下所示

以上是HTML實(shí)現(xiàn)美化上傳文件樣式的案例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！