這篇文章介紹的內容是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實現美化上傳文件樣式 的詳細內容，更多請關注 其它相關文章！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。