jquery.fileEveryWhere.js 크로스 브라우저 파일 표시 플러그인

jquery.fileEveryWhere.js 크로스 브라우저 파일 표시 플러그인_jquery

WBOY

풀어 주다： 2016-05-16 18:00:24

원래의

1322명이 탐색했습니다.

먼저 chrome, ie, firefox 세 가지 브라우저에서 input type="file"의 다양한 표현을 살펴보겠습니다.

크롬은 버튼 라벨 조합과 같아서 모양이 가장 다릅니다.

ff와 ie는 외관상으로 보면 Firefox가 더 표준적입니다. 사실 Firefox에는 두 가지 잠재적인 문제가 있습니다.

1. Firefox는 현재 type="file" 입력의 너비 정의를 지원하지 않습니다(그러나 FF는 크기 속성을 지원합니다. 크기 값을 설정하여 업로드 상자의 크기를 제어할 수 있습니다. 크기는 Blossoms - Firefox 에서 입력 유형="파일"의 크기는 얼마입니까?) 기사를 참조하세요.

2. Firefox에서 파일 형식을 제출할 때 파일 이름만 제출하고 경로는 제출하지 않는 반면, IE에서는 경로 파일 이름을 제출하지만 Chrome에서는 경로 파일 이름만 제출할 수 있지만 파일 이름만 표시합니다. Firefox에서 파일양식 제출시 파일명만 제출되고 경로는 제출되지 않습니다 (안타깝게도 당분간은 해결방법이 없습니다)

파일이 다양한 브라우저에서 균일하게 표시되도록 하려면 더 이상 순수한 스타일을 제어할 수 없으며 js 스크립트만 사용할 수 있습니다. 3가지 기본 단계가 있습니다:

1. 텍스트 상자와 버튼을 사용하여 입력 유형="파일"을 시뮬레이션합니다.

2. input="file"을 투명하게 만들고 위치 지정을 사용하여 텍스트 상자와 버튼을 완전히 덮습니다.

3. input type="file"이 onchange일 때 js를 사용하여 텍스트 상자의 값을 input type="file"의 값으로 설정합니다.

단계를 이해하면 전체 플러그인을 쉽게 작성할 수 있습니다.

코드를 복사하세요 코드는 다음과 같습니다.

/*
* 파일 어디서나 - 브라우저 범용 파일 업로드
* copyright->flowerszhong
* flowerszhong@gmail.com
*/
(function($ ) {
$.fn.fileEveryWhere = function(options) {
var defaults = {
WrapWidth: 300,
WrapHeight: 30,
ButtonWidth : 60,
ButtonHeight: 28 ,
ButtonText: "Browse",
TextHeight: 28,
TextWidth: 240
}
var options = $.extend(defaults, options );
var browser_ver = $ .browser.version.substr(0, 1);
var displayMode = ($.browser.msie && browser_ver <= "7") ? block";
이것을 반환합니다. Each(function() {
//래퍼 만들기, 상대 위치 지정으로 설정
var Wrapper = $("

")
.css({
" 너비": options.WrapWidth "px",
"height": options.WrapHeight "px",
"display": displayMode,
"zoom": "1",
"위치": "상대",
"overflow": "숨김",
"z-index":"1"
}); 업로드된 파일의 이름을 저장하기 위한 텍스트 입력 상자
var text = $('')
.css({
" width": options.TextWidth "px",
"heigth": options.TextHeight "px"
});
//찾아보기 버튼 생성
var 버튼 = $(' ')
.val(options.ButtonText)
$(this).wrap(wrapper).parent().append(text, 버튼);
$(this).css({
"position": "absolute",
"top": "0",
"left": "0",
"z- index": "2",
"height": options.WrapHeight "px",
"width": options.WrapWidth "px",
"cursor": "pointer",
" opacity": "0.0",
"outline":"0",
"filter": "alpha(opacity:0)"
});
if ($.browser.mozilla) { $(this).attr("size", 1 (options.WrapWidth - 85) / 6.5) }
$(this).bind("change", function() {
text.val($ (this).val());
});
}
})(jQuery)

🎜>

$("input:file").fileEveryWhere({parameter});

이 방법으로 input="file"을 균일하게 표시할 수 있으며 보기에도 쉽습니다.
플러그인 다운로드:
jquery.fileEveryWhere.rar

출처: http://www.cnblogs.com/flowerszhong/