input[type=file]样式更改以及图片上传预览

最新推荐文章于 2023-12-17 12:43:03 发布

weixin_30708329

最新推荐文章于 2023-12-17 12:43:03 发布

阅读量584

点赞数

文章标签： c#

原文链接：http://www.cnblogs.com/jf-67/p/8060042.html

版权

　　以前知道input[type=file]可以上传文件，但是没用过，今天初次用，总感觉默认样式怪怪的，想修改一下，于是折腾了半天，总算是小有收获。

　　以上是默认样式，这里我想小小的修改下：

　　HTML代码如下：

<form action="" name="file" class="file">
    上传文件<input type="file" id="img" name="img">
</form>

　　css代码如下：

<style>
    .file{
	width: 75px;
        height: 25px;
	line-height: 25px;
	text-align: center;
	background-color: green;
	position:relative;
    }
    .file input{
	width: 75px;
        height: 25px;
	opacity:0;
	filter:alpha(opacity=0);
	position:absolute;
	left:0;
	top:0;
    }
</style>

　　更改后，效果如下（样式很丑，这里主要是阐述下怎么更改input[type=file]默认样式的）

　　下面来说下使用input[type=file]上传图片实现预览效果的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.file{
		　　 width: 75px;
		    height: 25px;
		    line-height: 25px;
		    text-align: center;
		　　 background-color: green;
		　　 position:relative;
		}
		.file input{
		　　 width: 75px;
		    height: 25px;
		　　 opacity:0;
		　　 filter:alpha(opacity=0);
		　　 position:absolute;
		　　 left:0;
		　　 top:0;
		}
	</style>
</head>
<body>
	<form action="" name="file" class="file">
		上传文件
		<input type="file" id="img" name="img">
	</form>
	<div id="dd"></div>
	<script>
		var file = document.getElementById("img");
		file.onchange = function(){  // 文本框内容改变时触发
			var files = this.files; // 获取文件的数量
			for(var i=0;i<files.length;i++){
				readers(files[i])
			}
		}
		function readers(fil){
			var reader = new FileReader();  // 异步读取存储在用户计算机上的文件
			reader.readAsDataURL(fil); // 开始读取指定的Blob对象或File对象中的内容
			reader.onload = function(){
				document.getElementById("dd").innerHTML += "<img src='"+reader.result+"'>";  // 添加图片到指定容器中
			}; 
		}
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/jf-67/p/8060042.html

weixin_30708329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input[type=file]样式更改以及图片上传预览

　　以前知道input[type=file]可以上传文件，但是没用过，今天初次用，总感觉默认样式怪怪的，想修改一下，于是折腾了半天，总算是小有收获。　　　　以上是默认样式，这里我想小小的修改下：　　HTML代码如下：<form action="" name="file" class="file"> 上传文件<input type="file" id=...
复制链接

扫一扫