>웹 프론트엔드 >JS 튜토리얼 >js 구현 입력 유형='파일' 파일 업로드 샘플 code_javascript 기술

js 구현 입력 유형='파일' 파일 업로드 샘플 code_javascript 기술

WBOY
WBOY원래의
2016-05-16 17:26:352255검색

개발에서는 파일 업로드가 필수적입니다. 은 일반적으로 사용되는 업로드 태그이지만 보기 흉하고 변경할 수 없습니다. , 다른 태그(사진 등)를 클릭하면 파일 업로드 기능을 선택할 수 있습니다.
코드 보기:

코드 복사 코드는 다음과 같습니다.







js 파일 파일 업로드/> <br></head> <br><body><form id="form1" runat="server" method="post" enctype=" multipart/form-data" > <br><div> <br><div class="_box">이미지 선택</div> <br></div> <br><div class= "없음"><br><input type="file" name="_f" id="_f" /> <br></div> /body> <br></html> <br><script type="text/javascript"> <br>jQuery(함수 () { <br>$("._box").click(함수 ( ) { <br> $("#_f").click(); <br>}) <br></script> 일부 상위 버전 브라우저에서는 업로드할 파일을 브라우저 백그라운드에서 얻을 수 있습니다. 일부 하위 버전 브라우저에서는 Request.Files를 전혀 얻을 수 없습니다. <br> 정보를 확인하여 다음과 같이 변경해야 한다고 합니다. 🎜><br><br><br> <br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br> </div> <br><!DOCTYPE html> ;html xmlns="http://www.w3.org /1999/xhtml"> <br><head runat="server"> <br><meta http-equiv="Content-Type" 콘텐츠 ="text/html; charset=utf-8" /> ; <div class="codetitle"><script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></ 스크립트> <span><style type="text/css "> <a style="CURSOR: pointer" data="91721" class="copybut" id="copybut91721" onclick="doCopy('code91721')">._box <u>{ </u>폭: 119px </a>배경색: #53AD3F; </span>배경 이미지: url(images/bg.png ); 배경 반복: 반복 없음 <div class="codebody" id="code91721">배경 위치: 0 <br>배경 첨부: 스크롤; -높이: 37px; <br>텍스트 정렬: <br>색상: 흰색; <br>커서: 포인터 <br>.none <br>{ <br>너비: 0px; >height: 0px; <br>display: none; <br></style> <br><title>js는 입력 파일 업로드/> /head>

< ;form id="form1" runat="server" method="post" enctype="multipart/form-data"> 🎜>
이미지 선택








< ;script type="text/javascript">
jQuery(function () {
$("._box").click(function () {
return $("#_f").click ();
});
}) ;



호환성이 많이 향상되었지만 일부 브라우저에서는 아직은 사용하기 어렵습니다.
백그라운드에서
코드를 다음과 같이 수정하세요.




코드를 복사하세요.


코드는 다음과 같습니다.





js 实现 입력 파일 文件上传 />

<본문>




选择图그림






저는 我们点击选择图文实际点击了不透명도为0의 ,单用户切看不到 后台亦可以获取到要上传的文件了.
알았어
总结:
사용일个不透明島为0的 盖재要用户可见的标签(或图文等)上,让用户点击。
용 너비 높이 줄 높이 글꼴 크기 来控제한右侧浏览按钮的大小。
왼쪽 상단(오른쪽, 하단)을 사용하여 右侧浏览按钮的位置,可以设置为负值。
z-index를 사용합니다.
양식 必须有enctype="multipart/form-data"标记才能上传文件
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:이미지 업로드 판단 및 미리보기 스크립트 효과 예시_자바스크립트 능력다음 기사:이미지 업로드 판단 및 미리보기 스크립트 효과 예시_자바스크립트 능력

관련 기사

더보기