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

来源：懂视网责编：小采时间：2020-11-27 15:26:05

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

HTML选择图片并直接预览实现代码:本文主要和大家分享HTML选择图片并直接预览实现代码，希望大家可以根据本文的代码，实现HTML选择图片并直接预览的效果。<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

推荐度：

点击下载本文 文档为doc格式

导读HTML选择图片并直接预览实现代码:本文主要和大家分享HTML选择图片并直接预览实现代码，希望大家可以根据本文的代码，实现HTML选择图片并直接预览的效果。<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

本文主要和大家分享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>

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

推荐度：

点击下载本文 文档为doc格式

标签：图片实现代码

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐