js控制上传文件控件只能选择不能编辑

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

.uploadBox{position:relative;}
.fakeUploadInput{position:absolute;;z-index:1;top:0;left:0;}
.uploadInput{position:relative;z-index:2;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;}

#uploadInput4Box{margin:0;padding:0;position:relative;overflow:hidden;}
#uploadInput4Text,#uploadInput4Btn{margin:0;*margin-top:-25px;}
#uploadInput4Btn{*margin-left:5px;}
#uploadInput4{position:absolute;top:-5px;right:-5px;margin:0;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;font-size:50px;}
-->
</style>

<h2 id="case1">方法1：</h2>
<p>通过JS直接控制键盘的输入，结合IE独有属性contenteditable="false"，但是无法解决Firefox工具栏上的粘贴剪切按钮和Opera下删除键、退格键以及右键粘贴剪切操作</p>
<form method="post" action="">
	<p>
		<input type="file" id="uploadInput1" name="uploadInput1" contenteditable="false" autocomplete="off">
	</p>
</form>
<h2 id="case2">方法2：</h2>
<p>非IE下通过透明层遮盖输入框，但是会受到浏览器缩放功能的影响</p>
<form method="post" action="">
	<p>
		<input type="file" id="uploadInput2" name="uploadInput2" contenteditable="false" autocomplete="off">
	</p>
</form>
<h2 id="case3">方法3：</h2>
<p>用input和button伪装成上传文件，真正的上传文件输入框透明的浮动在其上面，依旧解决不了Firefox工具栏上的粘贴按钮和Opera下的右键粘贴的操作</p>
<form method="post" action="">
	<p>
		<input type="file" id="uploadInput3" name="uploadInput3" contenteditable="false" autocomplete="off">
	</p>
</form>
<h2 id="case4">方法4：</h2>
<p>利用CSS，使透明的上传控件只出现按钮部分，且浮动在指定按钮的上面。这个方法应该是比较彻底的实现了只选择不能编辑的目标，而且可以随心所欲的修改风格。</p>
<form method="post" action="">
	<p id="uploadInput4Box">
		<input type="text" id="uploadInput4Text" autocomplete="off">
		<button type="button" id="uploadInput4Btn">浏览...</button>
		<input type="file" id="uploadInput4" name="uploadInput4" autocomplete="off">
	</p>
</form>
<script type="text/javascript" src="/demo/yahoo-dom-event.js"></script>
<script type="text/javascript">//<![CDATA[
var $D = YAHOO.util.Dom;
var $  = $D.get;
var $E = YAHOO.util.Event;
var ua = navigator.userAgent;
var isOpera = (ua.indexOf('Opera')>-1)||false;
var isIE = (ua.indexOf('MSIE')>-1) && !isOpera;

//1
if(isOpera){
	$E.on(['uploadInput1'],'keypress',function(ev){
		$E.preventDefault(ev); //标准方法 ev.preventDefault();
	});
}else{
	$E.on(['uploadInput1'],'keydown',function(ev){
		ev = ev || window.event;
		if(isIE){
			//this.blur(); //因为contenteditable="false"
			this.click();
		}else{
			if($E.getCharCode(ev) == 8){// 此时firefox下按下backspace键，相当点击了"转到上一步的按钮";
					$E.preventDefault(ev);  
			} 
			this.focus();
		}
	});
}

//2
var coverUploadInputs = function(a){
	if(isIE){
		$E.on(a,'keydown',function(){
			this.click();
		});
	}else{
		var cover = document.createElement('div');
		    $D.setStyle(cover,'position','absolute');
		for(var i=0,n=a.length;i<n;i++){
			var f = $(a[i]);
			var c = cover.cloneNode(true);
					document.body.appendChild(c);
			$D.setXY(c,$D.getXY(f));
			$D.setStyle(c,'height',(f.scrollHeight + 'px'));
			$D.setStyle(c,'width',(f.scrollWidth - 70 + 'px'));
		}
	}
}
coverUploadInputs(['uploadInput2']);

//3
var initUploadInputs = function(a){
	var textInput = document.createElement('input');
		textInput.setAttribute('type','text');
		textInput.setAttribute('readonly','readonly');
		textInput.setAttribute('autocomplete','false');
	var btn = document.createElement('button');
		btn.setAttribute('type','button');
		btn.appendChild(document.createTextNode('浏览...'));
	var span = document.createElement('span');
		$D.addClass(span,'fakeUploadInput');
		span.appendChild(textInput);
		span.appendChild(btn);
	for(var i = 0,n=a.length;i<n;i++){
		var f = $(a[i]);
		var p = f.parentNode;
			$D.addClass(f,'uploadInput');
			$D.addClass(p,'uploadBox');
		var _span = span.cloneNode(true);
			p.appendChild(_span);
			$E.on(f,'change',function(ev,obj){
				obj.value = this.value;
			},_span.firstChild);		
	}
	
	if(isOpera){
		$E.on(a,'keypress',function(ev){
			$E.preventDefault(ev);
		});
	}else{
		$E.on(a,'keydown',function(ev){
			ev = ev || window.event;
			if(isIE){
				this.click();
			}else{
				$E.preventDefault(ev);  
				this.focus();
			}
		});
	}
}
initUploadInputs(['uploadInput3']);

//4
$E.on('uploadInput4','change',function(){
	$('uploadInput4Text').value = this.value;
});
//]]></script>

提示：您可以先修改部分代码再运行