JS使用H5实现图片预览功能


Posted in Javascript onSeptember 30, 2019

JS使用H5实现上传图片预览的功能,以下是代码的实现:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传预览</title>
<script type="text/javascript">
//预览图片,参数说明:第一个参数:要预览的file对象,第二个参数:预览的img标签的id名称
function yl(obj,id) {
 //FileReader
 if(window.FileReader){//验证当前的浏览器是否支持图片预览
 var reader=new FileReader();
 var file=obj.files[0];
 var regexImage=/^image\//;//js正则表达式,匹配是否拥有image
 if(regexImage.test(file.type)){
  //设置读取结束的回调函数
  reader.οnlοad=function(data){
  var img=document.getElementById(id);
  img.src=data.target.result;//将结果数据显示到img标签上

  };
  //开始读取上传的文件内容
  reader.readAsDataURL(file);
 }else{
  alert("亲,看清楚是图片预览");
  return;
 }
 }else{
 alert("亲,浏览器该升级了");
 return;
 }
}

</script>
</head>
<body>
<form action="fileup" method="post" enctype="multipart/form-data">
<input type="file" name="f1" onchange="yl(this,'ylimg')"/>
<img alt="图片预览" id="ylimg" width="400px" height="400px"/>
<input type="submit" value="上传图片"/>
</form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
js实现双色球效果
Aug 02 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
在vue中使用jsx语法的使用方法
Sep 30 #Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 #Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 #Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 #Javascript
uploadify插件实现多个图片上传并预览
Sep 30 #Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 #Javascript
JavaScript中的null和undefined用法解析
Sep 30 #Javascript
You might like
模仿OSO的论坛(四)
2006/10/09 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
js 操作符实例代码
2009/10/24 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
在python3中实现更新界面
2020/02/21 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python魔术方法专题
2020/06/19 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
新闻编辑自荐书范文
2014/02/12 职场文书
代理协议书范本
2014/04/22 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
银行自荐信范文
2015/03/25 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android