HTML implementiert die Verschönerung hochgeladener Dateistile

Der Inhalt dieses Artikels besteht darin, die von mir hochgeladenen Dateien zu verschönern. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen Traditionelle Schreibmethode

Der Effekt ist im Bild unten dargestellt

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

Dieser Stil wurde lange Zeit angepasst, aber das Endergebnis ist nicht zufriedenstellend.

Unkonventionelles Schreiben

verbirgt die eigentliche Eingabe

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

zum Hochladen von Dateien und ersetzt sie dann durch eine Schaltfläche oder ein P-Feld, mit dem der Stil einfach gesteuert werden kann. Wenn Sie auf die Schaltfläche klicken, können Sie auch js verwenden, um den Klick auf die Eingabe auszulösen, die zum Hochladen von Dateien verwendet wird.

style='display:none;'

Die tatsächliche Wirkung ist wie folgt

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

Verwandte Empfehlungen:

Verschönerung im Datei-Upload-Box-Stil

Verschönerung im Bild-Upload-Stil

Verschönern Sie die Datei-Upload-Box (Bilder-Upload-Box)

Das obige ist der detaillierte Inhalt vonHTML implementiert die Verschönerung hochgeladener Dateistile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!