HTML选择图片并直接预览实现代码

互联网 18-3-5

本文主要和大家分享HTML选择图片并直接预览实现代码，希望大家可以根据本文的代码，实现HTML选择图片并直接预览的效果。

<!DOCTYPE html>  <html>  <head>      <meta name="viewport" content="width=device-width" />      <title>选择图片并预览</title>        <script type="text/javascript">          function getFileUrl(sourceId) {              var url;              if (navigator.userAgent.indexOf("MSIE")>=1) { // IE                  url = document.getElementById(sourceId).value;              } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox                  url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));              } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome                  url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));              }              return url;          }          function preImg(sourceId, targetId) {              var url = getFileUrl(sourceId);              var imgPre = document.getElementById(targetId);              imgPre.src = url;          }      </script>    </head>  <body>  <p>      <br />      <br />      <a>上传者：<input type="text" /></a>      <br />      <br />      <form action="">          <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'photo');" />          <br />          <br />          <img id="photo" src="" width="300px" height="300px" style="display: block;" />      </form>  </p>  </body>  </html>

相关推荐：input type=file 选择图片并且实现预览效果详解

以上就是HTML选择图片并直接预览实现代码的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：直接