HTML은 업로드된 파일 스타일의 미화를 구현합니다.

零到壹度

풀어 주다： 2018-04-20 16:00:03

원래의

10457명이 탐색했습니다.

이 글의 내용은 내가 업로드한 파일을 HTML로 아름답게 만드는 내용입니다. 이제 특정 참조 가치가 있습니다. 필요한 친구들이 참조할 수 있습니다.

전통적인 글쓰기

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

로그인 후 복사

효과는 다음과 같습니다. 아래 사진과 같이
HTML은 업로드된 파일 스타일의 미화를 구현합니다.

이 스타일은 오랫동안 조정되었지만 최종 결과는 만족스럽지 않습니다.

새로운 글쓰기 방법

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

로그인 후 복사

파일 업로드를 위한 실제 입력style='display:none;'을 숨긴 다음 스타일을 쉽게 제어할 수 있는 버튼이나 P박스로 교체하세요. 버튼을 클릭하면 js를 사용하여 파일 업로드에 사용되는 입력에 대한 클릭을 트리거할 수도 있습니다.

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

로그인 후 복사

실제 효과는 다음과 같습니다

HTML은 업로드된 파일 스타일의 미화를 구현합니다.