zoukankan      html  css  js  c++  java
  • input[type=file]样式更改以及图片上传预览

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

      

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

      HTML代码如下:

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

      

      css代码如下:

    <style>
        .file{
    	 75px;
            height: 25px;
    	line-height: 25px;
    	text-align: center;
    	background-color: green;
    	position:relative;
        }
        .file input{
    	 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{
    		    75px;
    		    height: 25px;
    		    line-height: 25px;
    		    text-align: center;
    		   background-color: green;
    		   position:relative;
    		}
    		.file input{
    		    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>
    

      

  • 相关阅读:
    关于sizeof表达式作为数组元素个数的编译
    【deque】滑动窗口、双端队列解决数组问题
    【二叉树】重建二叉树
    字符数组与字符串指针
    【STL】C中的qsort与C++中的sort
    对C++不是类型安全语言的理解
    【vector】创建一个二维vector当作二维数组用
    批量处理改变文件名、文件后缀名
    位运算
    关于sqlserver帐号被禁用问题
  • 原文地址:https://www.cnblogs.com/jf-67/p/8060042.html
Copyright © 2011-2022 走看看