jquery_jquery를 기반으로 하는 크로스 브라우저 표시를 위한 파일 업로드 제어

이전에 입력 유형="파일"의 스타일을 정의하는 방법을 간략하게 소개하는 짧은 기사를 작성했습니다. 일반적인 양식의 경우 업로드 제어가 적습니다. 이 접근 방식은 코드를 줄일 뿐만 아니라 스타일도 아름답게 만듭니다. 사실 파일 제어 스타일을 정의하는 일반적인 아이디어는 동일합니다. "
firefox에서 input type="file"의 크기는 얼마입니까
"

여기서 참을 수가 없네요. 결과는 성공적입니다. 다음 내용은 위의 두 기사에서 인용되었습니다.
Daniel ppk는 여러 양식 제어 중에서 업로드 파일 제어 스타일이 가장 제어하기 어렵다고 말했습니다. 입력 유형="파일" 스타일 지정 문서를 참조하세요. 이 플러그인은 대부분 이 기사를 기반으로 합니다.
먼저 chrome, ie, firefox 세 가지 브라우저에서 input type="file"의 다양한 표현을 살펴보겠습니다.





크롬은 버튼 라벨 조합과 같다는 점이 가장 큰 차이점으로 보입니다.

ff와 ie는 외관상으로 보면 Firefox가 더 표준적입니다. 실제로 Firefox에는 두 가지 잠재적인 문제가 있습니다. 1. Firefox의 입력 너비 정의 현재 지원되지 않습니다(그러나 FF는 크기 속성을 지원합니다. 크기 값을 설정하여 업로드 상자의 크기를 제어할 수 있습니다. 이 크기가 얼마나 큰지에 대해서는 Fanhua-입력 유형의 크기는 무엇입니까=" 기사를 참조하세요. Firefox에서 "파일"을 선택하시겠습니까? ).
2. 파일 양식을 제출할 때 Firefox는 파일 이름만 제출하고 경로는 제출하지 않는 반면, IE는 경로 파일 이름을 제출하지만 파일 이름만 표시할 수 있습니다. Firefox에서 파일양식 제출 시 파일명만 제출되고 경로는 제출되지 않습니다(아쉽게도 당분간은 해결방법이 없습니다)
다양한 브라우저에서 파일이 균일하게 표시되도록 하려면 순수 스타일로는 불가능합니다. 더 이상 제어할 수 없으며 js만 스크립트로 사용할 수 있습니다. 3가지 기본 단계가 있습니다. 1. 텍스트 상자와 버튼을 사용하여 입력 유형="파일"을 시뮬레이션합니다.

2. input="file"을 투명하게 만들고 위치 지정을 사용하여 텍스트 상자와 버튼을 완전히 덮습니다.
3. input type="file"이 onchanged되면 ​​js를 사용하여 텍스트 상자의 값을 input type="file"의 값으로 설정합니다.

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




코드를 복사하세요


코드는 다음과 같습니다.

/* * 파일 어디서나 - 브라우저 범용 파일 업로드 * copyright->flowerszhong * flowerszhong@gmail.com * http://www .cnblogs.com/flowerszhong/ */

(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 return this.each(function() {
//포함 항목을 생성하고 상대 위치 지정으로 설정
var 래퍼 = $("

")
.css({
"width": options.WrapWidth "px",
"height": options.WrapHeight "px ",
"display": 디스플레이 모드,
"zoom": "1",
"position": "relative",
"overflow": "hidden",
"z- index":"1"
});
//업로드된 파일 이름을 저장할 텍스트 입력 상자 만들기
var text = $('')
.css({
"width": options.TextWidth "px",
"heigth": options.TextHeight "px"
});
//탐색 버튼 생성
var 버튼 = $('')
.val(options.ButtonText)
$(this ).wrap(wrapper).parent().append (텍스트, 버튼);
$(this).css({
"position": "absolute",
"top": "0" ,
"왼쪽": "0",
"z-index": "2",
"height": options.WrapHeight "px",
"width": options.WrapWidth " px",
"cursor": "포인터",
"opacity": "0.0",
"outline":"0",
"filter": "alpha(opacity:0) "
});
if ( $.browser.mozilla) { $(this).attr("size", 1 (options.WrapWidth - 85) / 6.5) }
$(this). 바인딩("변경", function() {
text.val($(this).val());
})
}); jQuery)


사용은 매우 간단합니다.

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



type="file"의 firefox 입력 너비 정의는 현재 지원되지 않지만 FF는 크기 속성을 지원하여 업로드 상자의 크기를 제어할 수 있습니다.
그런데 이 사이즈 값을 어떻게 설정하는지, size="10"이 얼마나 넓은지, 기본값은 무엇인지 기분에 따라 설정할 수는 없나요? 스크립트로 확인해보세요:

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

< ;script type=" text/javascript">
$(function() {
var fileArray = [];
var i = 0;
while (i fileArray.push( i ":
")
i
}
document.write (fileArray.join( ""));
$("input:file").each(function() { $(this).after("" $(this).width() " ") });
});

Firefox에서 이 결과를 얻으세요:


발견 특정 규칙, 기본값은 208픽셀, size="1"일 때 85픽셀, 각 크기의 너비가 6.5픽셀씩 다르기 때문에 다음과 같이 크기 값을 동적으로 설정할 수 있습니다.

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

if ($.browser.mozilla) { $(this).attr(" size", 1 (options.WrapWidth - 85) / 6.5)