input tyepe：file 修改样式_tyepe = sunbmit-CSDN博客

本文链接：https://blog.csdn.net/de_shy/article/details/106003625

input tyepe：file 修改样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			  .inputBox {
			      width: 100px;
			      height: 50px;
			      background: green;
			      color: white;
			      font-size: 16px;
			      text-align: center;
			      line-height: 50px;
			      border-radius: 4px;
			      cursor: pointer;
			    }
		</style>
	</head>
	<body>
		 <form action="" method="" enctype='multipart/form-data'>
		 
		    <label for='file' class='inputlabelBox'>
		 
		      <div class="inputBox">上传文件</div>
		 
		    </label>
		 
		    <input type="file" name="myfile" id='file' style="display:none;" />
		 
		  </form>
		 
		 
		 
		  <img src="" id="img" width="300" />

	</body>
	<script type="text/javascript">
    var inputlabelBox = document.querySelector('.inputlabelBox');
 
    var myfile = document.querySelector('#file');
 
    var img = document.querySelector('#img');
 
 
 
    myfile.onchange = function () {
 
      var my_file = this.files[0];
 
      console.log(file.files[0]);
      console.log(file.files[0].name);
 
      var reader = new FileReader();
 
      reader.readAsDataURL(my_file);
 
      reader.onload = function () {
 
        console.log(this.result);
        img.src = this.result;
 
      }
 
    }

	</script>
</html>