[JQUERY] 어떻게 CSS3 / 자바 스크립트와 스타일 "입력 파일"에? [복제]
JQUERY어떻게 CSS3 / 자바 스크립트와 스타일 "입력 파일"에? [복제]
해결법
-
1.나는 당신이 어떤 생각을 할 수 있다는이 거친 예제를 가지고 ...
나는 당신이 어떤 생각을 할 수 있다는이 거친 예제를 가지고 ...
<div id="file">Chose file</div> <input type="file" name="file" />#file { display:none; }var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function(){ $this = $(this); $('#file').text($this.val()); }) $('#file').click(function(){ fileInput.click(); }).show();
-
2.Reigels 아이디어,이 일을 확인 후, 나는 유형 = "파일"입력 필드 스타일링의 일반적인 문제에 대한 간단한 솔루션을 썼다 (파이어 폭스, 사파리와 크롬에 그것을 테스트).
Reigels 아이디어,이 일을 확인 후, 나는 유형 = "파일"입력 필드 스타일링의 일반적인 문제에 대한 간단한 솔루션을 썼다 (파이어 폭스, 사파리와 크롬에 그것을 테스트).
<div style="position:relative;"> <div id="file" style="position:absolute;">Click here to select a file</div> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;"> </div>그럼 당신은 물론 스타일의 "파일"사업부는 당신이 원하는 수있다.
당신이 유형 = 대신 사업부의 "텍스트"입력을 사용하고자하는 경우에, 단순히 값을 innerHTML을 변경 :
<div style="position:relative;"> <input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file"> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;"> </div>여기에 jQuery를 사용하여 내 원래의 대답은 :
<div style="position:relative;"> <div id="file" style="position:absolute;">Click here to select a file</div> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());"> </div> -
3.나뿐만 아니라이에 대한 사용자 지정 스타일을했다. 확인 해봐
나뿐만 아니라이에 대한 사용자 지정 스타일을했다. 확인 해봐
JS 바이올린 데모 - 사용자 정의 입력 유형 = "파일"
HTML
<input type="file" id="test"> <div class="button-group"> <a href="#" id="browse" class="button primary">Browse</a> <a href="#" id="save" class="button">Save</a> <a href="#" id="clear" class="button danger">Clear</a> </div> <input type="text" id="testfile"></input>CSS
body { padding:100px; } input[type="file"] { position:absolute; display:none; } #testfile { height: 26px; text-decoration: none; background-color: #eee; border:1px solid #ccc; border-radius:3px; float:left; margin-right:5px; overflow:hidden; text-overflow:ellipsis; color:#aaa; text-indent:5px; } #actionbtnBrowse, #actionbtnSave { margin:0 !important; width:60px; }JQuery와
$("#browse").click(function () { $("#test").click(); }) $("#save").click(function () { alert('Run a save function'); }) $("#clear").click(function () { $('#testfile').val(''); }) $('#test').change(function () { $('#testfile').val($(this).val()); })또한 외부 리소스 탭에 추가 :
https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css
-
4.여기에 (모든 프레임 워크없이) HTML, CSS 및 자바 스크립트를 사용하여 수행하는 방법입니다 :
여기에 (모든 프레임 워크없이) HTML, CSS 및 자바 스크립트를 사용하여 수행하는 방법입니다 :
아이디어는 <= '파일을'입력 유형>을을하는 것입니다 버튼을 숨겨 사용 더미
당신 스타일의 파일 업로드 버튼과. 이우리가 부르는 숨겨진 <입력 유형 = '파일'>의 클릭하십시오.데모:
// comments inlinedocument.getElementById를 ( "customButton"). 또는 addEventListener는 ({) (함수를 "클릭" document.getElementById를 ( "파일 업로드") ()을 클릭합니다.; // 실제 파일 업로드 버튼 클릭을 트리거 }); document.getElementById를 ( "파일 업로드").하여 addEventListener ( "변경"기능 () { VAR = document.getElementById를 fullpath에 ( '파일 업로드') 값.; VAR fileName에 = fullPath.split (/ (\\ | \ /) / g)) (.pop; 파일 이름을 가져 // document.getElementById를 ( 'FILENAME ") innerHTML을 파일 이름 =.; // 파일 이름을 표시 } 거짓); 몸{ 글꼴 - 가족 : 굴림; } #파일 업로드{ 표시 : 없음; / * 실제 파일 업로드 버튼을 표시하지 않습니다 * / } #customButton {/ * 스타일 더미 업로드 버튼 * / 배경 : 노란색; 국경 : 1 픽셀의 빨간색으로; 경계 반경 : 5px; 패딩 : 5px; 표시 : 인라인 블록; 커서 : 포인터; 색상 : 빨강; } <입력 유형 = "파일"ID = "파일 업로드">
검색 <스팬 ID = "fileName에">5.Reigel의 또한,
Reigel의 또한,
여기에 더 간단한 구현이다. 당신도 여러 파일 입력 필드에이 솔루션을 사용할 수 있습니다. 이 사람들을 도움이되기를 바랍니다 ;-)
<input type="file" name="file" /><!-- div is important to separate correctly or work with jQuery's .closest() --> <div> <input type="file" name="file[]" /> </div> <div> <input type="file" name="file[]" /> </div> <div> <input type="file" name="file[]" /> </div>// make all input fields with type 'file' invisible $(':file').css({ 'visibility': 'hidden', 'display': 'none' }); // add a textbox after *each* file input $(':file').after('<input type="text" readonly="readonly" value="" class="fileChooserText" /> <input type="button" value="Choose file ..." class="fileChooserButton" />'); // add *click* event to *each* pseudo file button // to link the click to the *closest* original file input $('.fileChooserButton').click(function() { $(this).parent().find(':file').click(); }).show(); // add *change* event to *each* file input // to copy the name of the file in the read-only text input field $(':file').change(function() { $(this).parent().find('.fileChooserText').val($(this).val()); });6.가짜의 사업부가 필요하지 않습니다! 아니 JS 별도의 HTML. 단지 CSS를 사용하는 것은 가능하다.
가짜의 사업부가 필요하지 않습니다! 아니 JS 별도의 HTML. 단지 CSS를 사용하는 것은 가능하다.
최상의 방법은 의사 소자를 사용한다 : 후나 : 전에 디 명백한 입력 요소로. 그런 스타일이 의사 요소 당신이 원하는대로. 나는 다음과 같이 모든 입력 파일에 대한 일반적인 스타일로 할 권 해드립니다 :
input[type="file"]:before { content: 'Browse'; background: #FFF; width: 100%; height: 35px; display: block; text-align: left; position: relative; margin: 0; margin: 0 5px; left: -6px; border: 1px solid #E0E0E0; top: -1px; line-height: 35px; color: #B6B6B6; padding-left: 5px; display: block; }-> DEMO
7.여기에 그 jQuery를 활용하여 내가 사용 한 예는, 난 파이어 폭스 (11), 및 크롬 (18)뿐만 아니라, IE9에 대해 테스트했습니다. 내 책에 브라우저와는 꽤 호환 그래서 난 단지 그 세와 함께 작동하지만.
여기에 그 jQuery를 활용하여 내가 사용 한 예는, 난 파이어 폭스 (11), 및 크롬 (18)뿐만 아니라, IE9에 대해 테스트했습니다. 내 책에 브라우저와는 꽤 호환 그래서 난 단지 그 세와 함께 작동하지만.
다음은 기본 "사용자 정의"HTML 구조입니다.
<span> File to Upload<br /> <label class="smallInput" style="float:left;"> <input type="file" name="file" class="smallInput" /> </label> <input type="button" class="upload" value="Upload" style="float:left;margin-top:6px;margin-left:10px;" /> </span>여기 내 CSS의 샘플입니다
label.smallInput { background:url(images/bg_s_input.gif) no-repeat; width:168px; }이 무거운 리프터입니다.
/* File upload magic form?? */ $("input.smallInput[type=file]").each(function(i){ var id = "__d_file_upload_"+i; var d_wrap = $('<div/>').attr('id',id).css({'position':'relative','cursor':'text'}); $(this).wrap(d_wrap).bind('change blur focus keyup click',function(){ $("#"+id+" input[type=text]").val($(this).val()); }).css({'opacity':0,'zIndex':9999,'position':'absolute'}).removeClass('smallInput'); obj = $(this); $("#"+id).append($("<input/>").addClass('smallInput').attr('type','text').css({'zIndex':9998,'position':'absolute'}).bind('click',function(e){obj.trigger('click');$(this).blur();})); obj.closest('span').children('input.upload[type=button]').bind('click',function(e){ obj.trigger('click'); $(this).blur(); }); }); /* ************************ */html로 그것이 확인이 자바 스크립트에 포함 할 수있는, 나머지 독립적 이름, 단순히 내가 게으른 측면에 조금 해요 넣을 수 있도록, 내가 버튼을 포함 단순한 요소, 매우 정직하고 있습니다. 이것은 당신이 기본 HTML과 브라우저가 통증이있을하기로 결정하는 경우에 대체 형태의 구조를 정의 할 수 있습니다 파일의 유형이 smallInput의 클래스 모든 입력에 대한 코드를 검색합니다.
이 방법은이 파일 입력에 관해서 모든 브라우저 동작을 변경하지 않습니다, 배달을 보장하기 위해 자바 스크립트를 사용합니다.
당신은 HTML을 수정할 수 있으며, 자바 스크립트는 매우 강력하게,이 코드는 내가 변경하기됩니다 의심 때문에 내 현재 프로젝트를 충분하다.
8.같은 문제에 란 오늘, 그러나 쉽게 자신 만의 스타일을 가지고있는 방법이 보인다 - 숨기기 입력 및 스타일 관련 레이블 :
같은 문제에 란 오늘, 그러나 쉽게 자신 만의 스타일을 가지고있는 방법이 보인다 - 숨기기 입력 및 스타일 관련 레이블 :
<div class="upload"> <label for="my-input"> Upload stuff </label> <input type="file" id="my-input" name="files[]" /> </div>CSS :
.upload input{ display: none; } .upload label{ background: DarkSlateBlue; color: white; padding: 5px 10px; }최근의 작품 크롬, 파이어 폭스와 IE 10. 테스트 다른 사람을하지나요
9.Reigel의 대답은 아이디어를 전달하지만, 정말에 연결된 모든 스타일이 없습니다. 나는 최근에이 문제를 가로 질러 와서 스택 오버플로 답변의 과다에도 불구하고, 아무도 정말 법안을 맞는 것 같았다. 결국, 나는 간단하고 우아한 솔루션을 갖도록이 사용자 정의 끝났다.
Reigel의 대답은 아이디어를 전달하지만, 정말에 연결된 모든 스타일이 없습니다. 나는 최근에이 문제를 가로 질러 와서 스택 오버플로 답변의 과다에도 불구하고, 아무도 정말 법안을 맞는 것 같았다. 결국, 나는 간단하고 우아한 솔루션을 갖도록이 사용자 정의 끝났다.
또한 파이어 폭스, IE (11, 10 및 9), 크롬과 오페라, 아이 패드와 약간의 안드로이드 장치에서이 작업을 테스트했습니다.
여기 JSFiddle 링크입니다 -> http://jsfiddle.net/umhva747/
$ ( '입력 [TYPE = 파일]). 변화 (함수 (E) { = $ (이) 달러; $ in.next () HTML ($ in.val ()).; }); $ ( '. uploadButton'). 클릭 (함수 () { VAR fileName에 = $ ( "# 파일 업로드") 발 ().; 경우 (파일 이름) { 경고 (파일 이름 + "는 업로드 할 수 있습니다."); } 다른 { 경고 ( "업로드 할 파일을 선택하세요"); } }); 몸 { 배경 색상 : 검정; } div.upload { 배경 색상 : #fff; 국경 : 1 픽셀의 고체 #ddd; 경계 반경 : 5px; 표시 : 인라인 블록; 높이 : 30 픽셀; 패딩 : 3px의 40px에는 3px 3px의; 위치 : 상대; 폭 : 자동; } div.upload : 가져가 { 불투명도 : 0.95; } div.upload 입력 [TYPE = "파일"{ 표시 : 입력 블록; 폭 : 100 %; 높이 : 30 픽셀; 불투명도 : 0; 커서 : 포인터; 위치 : 절대; 왼쪽 : 0; } .uploadButton { 배경 색상 : # 425F9C; 테두리 : 없음; 경계 반경 : 3px의; 색상 : #FFF; 커서 : 포인터; 표시 : 인라인 블록; 높이 : 30 픽셀; 마진 오른쪽 : 15 픽셀; 폭 : 자동; 패딩 : 0 20 픽셀; 상자 크기 조정 : 내용 상자; } .파일 이름 { 글꼴 - 가족 : 굴림; 폰트 사이즈 : 14px; } .upload + .uploadButton { 높이 : 38px; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">