点击图片上传实时预览

2022-05-08 20:16 285阅读 0赞

html源代码如下：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>图片上传</title>
    </head>
    <style>
        div#showdiv{
                width:200px;
            }
            img#showimg{
                cursor:pointer;
            }
    </style>
    <body>
    <center>
        <form >
            <div id="showdiv">
                <label for="upfile">
                    <img name="showimg" id="showimg" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=687491883,734414948&fm=26&gp=0.jpg" style="display:block;" alt="预览图片" width="300" />
                </label>
            </div>
            <input name="upfile" type="file" id="upfile" size="40" onchange="viewmypic(showimg,this.form.upfile);" style="display:none;" />
            <br />
        </form>
    
    
        <br />
        </div>
        <div style="display:none">
        </div>
    </center>
    <script>
        function viewmypic(mypic,upfile) {
            if(upfile.files && upfile.files[0])
            {
                mypic.style.display="";
            //火狐下，直接设img属性
            //mypic.src = upfile.files[0].getAsDataURL();
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                mypic.src = window.URL.createObjectURL(upfile.files[0]);
            }
            else
            {
            //IE下
                if (upfile.value){
                    mypic.src=upfile.value;
                    mypic.style.display="";
                    mypic.border=1;
                }
            }
        }
    </script>
    </body>
    </html>

文章版权声明：注明蒲公英云原创文章，转载或复制请以超链接形式并注明出处。

发表评论取消回复

表情：

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

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

相关阅读

相关 uni-app点击预览图片

<image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi

忘是亡心i/ 2021年07月25日 05:31/ 1 赞/ 844 阅读

相关 uniapp 上传图片、点击预览图片

1、在回调中打开本地相册 uni.chooseImage({ count:上传照片数量, //浏览器无法限制,默认上传数量为9

比眉伴天荒/ 2021年07月24日 19:07/ 0 赞/ 1241 阅读

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 15:04/ 0 赞/ 465 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 18:16/ 0 赞/ 430 阅读

相关点击头像按钮实现图片上传并预览

背景手机添加通讯录时，希望实现点击图片上传头像，这里主要包含两个功能 1. 将上传图片的input按钮替换为指定图片，点击图片是触发input的上传事件。 2.

淡淡的烟草味﹌/ 2021年12月12日 07:29/ 0 赞/ 526 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 18:50/ 0 赞/ 248 阅读

相关点击图片上传实时预览

html源代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset

快来打我*/ 2022年05月08日 20:16/ 0 赞/ 286 阅读

相关微信图片点击预览

$(function(){ var imgsurl=[]; var nowurl=''; var imgObj=$(".swi

快来打我*/ 2022年06月08日 17:50/ 0 赞/ 234 阅读

相关 vue中按钮点击上传图片并预览

html部分： <input type="file" ref="filElem" class="upImage" accept="image/" @change="

- 日理万妓/ 2022年11月14日 21:18/ 0 赞/ 76 阅读

相关 uni-app点击预览图片

<image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi

朴灿烈づ我的快乐病毒、/ 2022年12月02日 08:43/ 0 赞/ 166 阅读