首页 > 其他分享 >点击图片上传实时预览

点击图片上传实时预览

时间:2024-01-12 23:31:51浏览次数:35  
标签:files src style mypic 预览 点击 getAsDataURL 上传 upfile

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>

标签:files,src,style,mypic,预览,点击,getAsDataURL,上传,upfile
From: https://blog.51cto.com/ding/9225094

相关文章

  • 251-AMap.MarkerClusterer聚合点自定义点击会重复触发
    map.plugin(["AMap.MarkerClusterer"],function(){letcluster=null;varcount=pointerList.length;letclickFlag=false;functionrenderClusterMarker(context){console.log("renderClusterMarker..5.")l......
  • java上传图片or头像
     走upload方法进行文件的保存,第一个参数为上传文件的类型,头像or照片  第一步检查是否可以上传,是否是jpg,png等类型第二步根据日期,文件名,uuid等生成文件名称。第三步将文件保存到服务器最后return的是一个文件的相对地址,根据subDir和fileName+文件名返回的相对路径,比如p......
  • 没有点击挂断,一端杀死程序另一端需等待1分钟响应
    融云音视频SDK考虑到用户进入隧道或者其他弱网环境的问题,不会在没有心跳后立即断开与服务器的连接,会等待1分钟的超时,然后断开音视频服务。所以,如果通话双方有一方手动杀死App的话,由于没有调用挂断,所以另一端需要等待1分钟后才会挂断;所以,我们建议用户可以尝试监听应用杀死的......
  • 如何上传苹果ipa安装包?
    ​引言在将应用程序上架到苹果应用商店之前,开发者需要学习如何上传ipa安装包。本文将介绍使用appuploader工具将ipa安装包上传到苹果应用商店的详细步骤,并提供一些实用的技巧。摘要appuploader是一款简单易用的软件,用于向AppStore提交应用程序。你可以在苹果电脑上搜索并下载......
  • 如何上传苹果ipa安装包?
    ​ 如何上传苹果ipa安装包?引言在将应用程序上架到苹果应用商店之前,开发者需要学习如何上传ipa安装包。本文将介绍使用appuploader工具将ipa安装包上传到苹果应用商店的详细步骤,并提供一些实用的技巧。摘要appuploader是一款简单易用的软件,用于向AppStore提交应用程序。你可......
  • JDK版本升级到17后,GeoServer的图层无法图层预览
    一、问题JDK版本升级到17后,我们在web端上会发现很多功能会莫名其妙的报错打开图层预览,也发现图层加载不出来二、解决办法https://www.osgeo.cn/geoserver-user-manual/production/java.html我们只需要将其删除,然后重启geoserver即可......
  • ajax实现文件上传
    ajax上传文件上传文件我一般采用form表单上传,form简单form上传文件<formid="jsSubmit"method="post"action="url"enctype="multipart/form-data"><inputtype="file"name="file"/></form><......
  • 文件上传漏洞 原理利用防御实战
    原理1、文件上传(FileUpload)是大部分Web应用都具备的功能,例如用户上传附件、修改头像、分享图片/视频等2、正常的文件一般是文档、图片、视频等,Web应用收集之后放入后台存储,需要的时候再调用出来返回3、如果恶意文件如PHP、ASP等执行文件绕过Web应用,并顺利执行,则相当于黑客直......
  • uniapp中实现H5录音和上传、实时语音识别(兼容App小程序)和波形可视化
    目录Recorder-UniCore插件特性集成到项目中调用录音上传录音ASR语音识别在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能,uniapp自带的recorderManager接口不支持H5、录音格式和实时回调onFrameRecorded兼容性不好,用Recorder插件可避免这些问题。DCloud插件市场下载插......
  • 低代码开发中的文件上传与数据处理:实战指南
    在当今的信息化时代,数据已成为企业的重要资产。为了更好地管理和利用这些数据,许多企业开始采用表单上传组件来导入和处理数据。通过使用表单上传组件,用户可以方便地将文件上传至系统中,然后进行后续的数据处理和分析。这种方式的优点在于,用户无需掌握复杂的编程技术,即可完成数据导入......