前言

h5实训时实现的一个图片上传即时显示的效果;如下图所示

正文

Html代码


<form action="" method="POST" role="form">
        <div class="form-group">
    	<label for="touxiang"   >头像上传:</label>
		<input type="file"  id="headPhoto" name="headPhoto" />
  		<div  ><img  id="imag" src="img/up.png"  alt="" style="height:5rem;width: 5rem;"></div>
 		</div>     
 </form>

js脚本代码

<script>
        /*显示上传的图片*/
          function getObjectURL(file) {
                  var url = null ;
                  if (window.createObjectURL!=undefined) {
                      url = window.createObjectURL(file) ;
                  } else if (window.URL!=undefined) {
                      url = window.URL.createObjectURL(file) ;
                  } else if (window.webkitURL!=undefined) { 
                      url = window.webkitURL.createObjectURL(file) ;
                  }
                  return url ;
              }
              $('#headPhoto').change(function() {
                  var eImg=$('#imag');
                  eImg.attr('src', getObjectURL($(this)[0].files[0]));
                  $(this).after(eImg);
              });

   </script>

window.URL.createObjectURL方法
创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.
语法:
objectURL = window.URL.createObjectURL(blob);
blob参数是一个File对象或者Blob对象.
objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
    <form action="" method="POST" role="form">
        <div class="form-group">
    	<label for="touxiang"   >头像上传:</label>
		<input type="file"  id="headPhoto" name="headPhoto" />
  		<div  ><img  id="imag" src="img/up.png"  alt="" style="height:5rem;width: 5rem;"></div>
 		</div>     
    </form>

</body>
<script>
        /*显示上传的图片*/
          function getObjectURL(file) {
                  var url = null ;
                  if (window.createObjectURL!=undefined) {
                      url = window.createObjectURL(file) ;
                  } else if (window.URL!=undefined) { 
                      url = window.URL.createObjectURL(file) ;
                  } else if (window.webkitURL!=undefined) { 
                      url = window.webkitURL.createObjectURL(file) ;
                  }
                  return url ;
              }
              $('#headPhoto').change(function() {
                  var eImg=$('#imag');
                  eImg.attr('src', getObjectURL($(this)[0].files[0]));
                  $(this).after(eImg);
              });
      </script>
</html>

参考链接

后记

国庆杭州四天三夜，真期待呀