HTML选择图片直接预览效果

超、凢脫俗 2022-05-30 04:18 276阅读 0赞

**直接上代码**

<!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>
    <div>
        <br />
        <br />
        <a>上传者：<input type="text" /></a>
        <br />
        <br />
        <form action="">
            <input type="file" name="imgOne" id="imgOne" οnchange="preImg(this.id,'photo');" />
            <br />
            <br />
            <img id="photo" src="" width="300px" height="300px" style="display: block;" />
        </form>
    </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 php type=file预览,input type=file 选择图片并且实现预览效果的实例

通过标签，给它指定type类型为file，可提供文件上传； accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/\； multiple：规定是否可

约定不等于承诺〃/ 2023年01月17日 10:54/ 0 赞/ 110 阅读

相关 blob html 预览_iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

这篇文章发布于 2017年08月24日，星期四，01:09，归类于 js实例。阅读 1755 次, 今日 1350 次一、关于前端代码效果实时预览前端代码效果实时预览

比眉伴天荒/ 2022年12月31日 11:23/ 0 赞/ 202 阅读

相关 vue实现上传图片并预览效果 html+css+js

一.话不多，先看效果： ![在这里插入图片描述][20210623205125578.gif_pic_center] 大家好，(๑╹◡╹)ﾉ” 这是我在逛b站时看

╰+哭是因爲堅強的太久メ/ 2022年10月09日 04:47/ 0 赞/ 492 阅读

相关 html5 input file视频预览,input type=file 选择图片并且实现预览效果的实例

通过标签，给它指定type类型为file，可提供文件上传； accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/\； multiple：规定是否可

我不是女神ヾ/ 2022年10月07日 08:50/ 0 赞/ 339 阅读

相关 html选择本地图片即时预览

最近在做一个.net mvc的网站，想让用户在网页中上传图片的过程中预览图片，本以为很简单，以为可以直接在html中解决，百度了很多才发现貌似挺麻烦，综合一些大神的回答，

谁践踏了优雅/ 2022年09月22日 11:44/ 0 赞/ 291 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 482 阅读

相关 HTML选择图片直接预览效果

直接上代码 <!DOCTYPE html> <html> <head> <meta name="viewport" cont

超、凢脫俗/ 2022年05月30日 04:18/ 0 赞/ 277 阅读

相关深入浅出JQuery (三) 图片预览效果

1.在每次学习相同的内容时都会有不同的理解，就好像我们每次从同一个地方走过的感觉的不同的一样，JQuery只是JavaScript框架中的一种，在层层众生当中脱颖

蔚落/ 2022年03月27日 04:47/ 0 赞/ 215 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 697 阅读

相关微信小程序选择图片和预览图片

选择图片视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage(\{\}) 此方法是用来选择图片的方法,具体使用

素颜马尾好姑娘i/ 2021年09月17日 00:28/ 0 赞/ 663 阅读