点击图片上传实时预览

快来打我* 2022-05-08 12:16 571阅读 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 条评论，571人围观）

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

相关阅读

相关 Vue实现点击上传图片预览图片功能

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL...

曾经终败给现在/ 2024年04月18日 21:39/ 0 赞/ 31 阅读

相关 uni-app点击预览图片

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

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

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

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

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

相关微信图片点击预览

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

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

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

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

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

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

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

淡淡的烟草味﹌/ 2021年12月11日 23:29/ 0 赞/ 794 阅读

相关上传图片并预览

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

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

相关 extjs上传图片预览

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

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

相关 uni-app点击预览图片

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

忘是亡心i/ 2021年07月24日 21:31/ 1 赞/ 1338 阅读

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

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

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