집 > 기사 > 웹 프론트엔드 > 입력 파일 제어 및 미화 정보

입력 파일 제어 및 미화 정보

高洛峰원래의: 2017-02-17 16:15:141762검색

일부 웹사이트에 업로드할 때 "찾아보기" 버튼을 클릭하면 [파일 선택] 대화 상자가 나타납니다. 이 기능을 구현하려면 입력 파일 제어를 사용하면 됩니다~

<!doctype html>    
<html lang="en">    
<head>    
  <meta charset="UTF-8">    
  <title>Document</title>    
  <style></style>    
</head>    
<body>    
　　<input type="file" value="选择文件" />    
</body>    
</html>

렌더링은 Jiang 아줌마의 것입니다:

주의! 이것이 텍스트와 버튼으로 구성되어 있다고 생각하지 마십시오. 사실 파일 제어입니다

关于input的file 控件及美化

오늘 직장에서 요구 사항이 발생했습니다. " 선택한 파일 없음" ", 한 시간 동안 고민한 끝에 너비 값 설정이 완료되었음을 발견했습니다.

코드:

width 값 아래와 같이 딱 맞게 70px로 설정하세요.

关于input的file 控件及美化

[미화]

아이디어:

바깥쪽 p의 레이어는 스타일을 작성할 때 상대 위치 지정이 필요하기 때문에 내부에 위치 참조를 제공하여 실제 파일 컨트롤이 시뮬레이션을 덮고 파일 컨트롤을 숨깁니다(파일 컨트롤이 보이지 않는 경우에도)

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Document</title>  
  <style>  
    .file-box{ position:relative;width:340px}    
    .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}    
    .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}    
    .file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }    
  </style>  
</head>  
<body>  
    <br><br>  
    <p class="file-box">    
        <form action="" method="post" enctype="multipart/form-data">    
        <input type=&#39;text&#39; name=&#39;textfield&#39; id=&#39;textfield&#39; class=&#39;txt&#39; />    
        <input type=&#39;button&#39; class=&#39;btn&#39; value=&#39;浏览&#39; />    
        <input type="file" name="fileField" class="file" id="fileField" size="28"/>    
    </form>    
    </p>    
</body>  
</html>

효과:

关于input的file 控件及美化

위의 파일 제어 및 입력 미화에 대한 글은 모두 제가 에디터에서 공유한 내용입니다. 이것이 당신에게 참고가 되기를 바라며, Support PHP Chinese 웹사이트를 더 많이 읽어보시기 바랍니다.

입력 파일 제어 및 미화에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：HTML의 테이블 태그에 대한 기본 학습 튜토리얼다음 기사：HTML의 테이블 태그에 대한 기본 학습 튜토리얼

입력 파일 제어 및 미화 정보

관련 기사