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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
js canvas实现擦除动画
Jul 16 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
用js实现in_array的方法
2013/11/05 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Python读取键盘输入的2种方法
2015/06/16 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python实现猜数字小游戏
2020/03/24 Python
Python重新加载模块的实现方法
2018/10/16 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
关于python 跨域处理方式详解
2020/03/28 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python怎么提高计算速度
2020/06/11 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
战友聚会邀请函
2014/01/18 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
运动会800米赞词
2015/07/22 职场文书