Table of Contents

Traditional writing method

Unconventional writing method

Home

Web Front-end

HTML Tutorial

HTML implements beautification of uploaded file styles

零到壹度

Apr 20, 2018 pm 04:00 PM

html File Upload

This article introduces the HTML implementation of beautifying the uploaded file i style, which has a certain reference value. Now I share it with everyone. Friends in need can refer to it

Traditional writing method

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

Copy after login

The effect is shown in the picture below
HTML implements beautification of uploaded file styles

This style has been adjusted for a long time, but the final result is not satisfactory.

Unconventional writing method

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

Copy after login

Give the real Input for uploading files style='display:none;'Hide it, and then use a style that is easy to control button or p box, etc. instead. When you click the button, you can also use js to trigger the click on the input used to upload files.

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

Copy after login

The actual effect is as follows

HTML implements beautification of uploaded file styles

#Related recommendations:

File upload box style beautification

Picture upload style beautification

Beautify the upload file box (upload picture box)

The above is the detailed content of HTML implements beautification of uploaded file styles. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn