您正在使用 IPV4 [34.201.37.128] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JS使用H5实现图片预览功能
内容摘要: !DOCTYPEhtmlhtmlheadmetacharset='UTF-8'title文件上传预览/titlescripttype='text/javascript'//预览图片,参数说明:第一个参数:要预览的file对象,第二个参数:预览的img标签的id名称functionyl(obj,id){//FileReaderif(window.FileRea......
<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>文件上传预览</title>

<scripttype="text/javascript">

//预览图片,参数说明:第一个参数:要预览的file对象,第二个参数:预览的img标签的id名称

functionyl(obj,id){

//FileReader

if(window.FileReader){//验证当前的浏览器是否支持图片预览

varreader=newFileReader();

varfile=obj.files[0];

varregexImage=/^image\//;//js正则表达式,匹配是否拥有image

if(regexImage.test(file.type)){

//设置读取结束的回调函数

reader.οnlοad=function(data){

varimg=document.getElementById(id);

img.src=data.target.result;//将结果数据显示到img标签上

};

//开始读取上传的文件内容

reader.readAsDataURL(file);

}else{

alert("亲,看清楚是图片预览");

return;

}

}else{

alert("亲,浏览器该升级了");

return;

}

}

</script>

</head>

<body>

<formaction="fileup"method="post"enctype="multipart/form-data">

<inputtype="file"name="f1"onchange="yl(this,'ylimg')"/>

<imgalt="图片预览"id="ylimg"width="400px"height="400px"/>

<inputtype="submit"value="上传图片"/>

</form>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JavaScript实现限时秒杀功能

 

下一篇:用js实现计算代码行数的简单方法附代码

发布日期:2023/4/13
手机扫二维码直达本页
发布时间:12:56:16
点  击:11
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....