Heim > Web-Frontend > HTML-Tutorial > HTML implementiert die Verschönerung hochgeladener Dateistile

HTML implementiert die Verschönerung hochgeladener Dateistile

零到壹度
Freigeben: 2018-04-20 16:00:03
Original
10451 Leute haben es durchsucht

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>
Nach dem Login kopieren


HTML implementiert die Verschönerung hochgeladener DateistileDieser 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="max-width:90%">
    <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>
Nach dem Login kopieren
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=&#39;display:none;&#39;

Die tatsächliche Wirkung ist wie folgt
$("#uptea").click(function () {
    $("#upteainput").click();
});//下面是ajax上传文件的代码,此处就不做过多讲解。 $("#upteainput").change(function () {//如果上传文件的input内容发生了变化
            $val = $("#upteainput").val();            if ($val != &#39;&#39;) {//要上传的文件名不为空
                $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(&#39;Error loading XML document&#39;);
                    },
                    success: function (data, status) {//如果调用php成功
                        if (data.errno != 0) {                            if (data.errmsg != &#39;&#39;) {
                                alert(data.errmsg);
                            } else {
                                alert("系统错误");
                            }
                        }
                        console.log(data);
                        alert("导入成功");
                        window.location.reload();
                    }
                });
            }
        });
Nach dem Login kopieren

HTML implementiert die Verschönerung hochgeladener Dateistile


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage