HTML實作美化上傳檔案樣式

這篇文章介紹的內容是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 != '') {//要上传的文件名不为空
                $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實作美化上傳檔案樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！