上传

上传文件按钮隐藏及美化处理

星期一, 八月 12th, 2019 | html5 | 没有评论

1.上传文件的按钮一直都是系统默认感觉不好看，可以通过下面两种方式调节

1.1 通过绑定click事件进行后续处理

1.2 为样式隐藏 如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>upload</title>
</head>
<body>
	<script type="text/javascript">
		function clp(){
			return document.getElementById('fileIa').click();
		}
		function up(){
			var file = document.getElementById("file").files[0],        
     		form = new FormData(),
    		 req = new XMLHttpRequest();
    		 form.append("file", file);
     		req.onreadystatechange = function() {
        	if(req.readyState === 4 && req.status === 200) {
            	// 回调函数
       		 }
     		req.open("post", 'URL', true);
     		req.send(form);
		}
	</script>
	<a href="javascript:clp();">clp</a>
<input type="file" name="fileIa" id="fileIa" style="display: none;">
 
<p>第二种</p>
<style>
#uploadImg{overflow:hidden; position:absolute}
#handfile{ position:absolute; z-index:100; opacity:0;filter:alpha(opacity=0);}
</style>
<span id="uploadImg" title="上传图片和文件等"><input type="file" id="handfile" size="1" ><a href="javascript:;" title="上传图片文件等">upload</a></span>
</body>
</html>

Tags:

Search

相关文章

热门文章

最新文章

文章分类

标签云

Links

Meta