HTML implémente l'embellissement des styles de fichiers téléchargés

Le contenu de cet article est de réaliser l'embellissement des fichiers téléchargés que je stylise en HTML. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

.

Méthode d'écriture traditionnelle

<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>

L'effet est montré dans l'image ci-dessous

Ce style a été ajusté depuis longtemps, mais le résultat final est pas satisfaisant.

L'écriture non conventionnelle

<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>

masque la véritable entrée style='display:none;' pour le téléchargement de fichiers, puis la remplace par un bouton ou une boîte p dont le style est facile à contrôler. Lorsque vous cliquez sur le bouton, vous pouvez également utiliser js pour déclencher le clic sur l'entrée utilisée pour télécharger les fichiers.

$("#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();
                    }
                });
            }
        });

L'effet réel est le suivant

Recommandations associées :

Embellissement du style de boîte de téléchargement de fichiers

Embellissement du style de téléchargement d'image

Embellissez la boîte de téléchargement de fichiers (boîte de téléchargement d'image)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!