이 글의 내용은 내가 업로드한 파일을 HTML로 아름답게 만드는 내용입니다. 이제 특정 참조 가치가 있습니다. 필요한 친구들이 참조할 수 있습니다.
<form id="upform" enctype='multipart/form-data'> <p class="form-group"> <label for="upteainput">上传文件</label> <input id="upteainput" name="upfile" type="file" class="form-control-file"> </p></form>
효과는 다음과 같습니다. 아래 사진과 같이
이 스타일은 오랫동안 조정되었지만 최종 결과는 만족스럽지 않습니다.
<form id="upform" enctype='multipart/form-data' 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>
파일 업로드를 위한 실제 입력style='display:none;'
을 숨긴 다음 스타일을 쉽게 제어할 수 있는 버튼이나 P박스로 교체하세요. 버튼을 클릭하면 js를 사용하여 파일 업로드에 사용되는 입력에 대한 클릭을 트리거할 수도 있습니다.
$("#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(); } }); } });
실제 효과는 다음과 같습니다
관련 추천 :
업로드를 아름답게 하세요 파일 상자 (사진 상자 업로드)
위 내용은 HTML은 업로드된 파일 스타일의 미화를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!