JavaScript实现预览本地上传图片功能完整示例


Posted in Javascript onMarch 08, 2019

本文实例讲述了JavaScript实现预览本地上传图片功能。分享给大家供大家参考,具体如下:

<html>
<head>
<title>3water.com 图片上传预览</title>
<script> 
  function PreviewImage(imgFile) {
    var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
    if (!pattern.test(imgFile.value)) {
      alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片!");
      imgFile.focus();
    } else {
      var path;
      if (document.all) {//IE 
        imgFile.select();
        path = document.selection.createRange().text;
        document.getElementById("imgPreview").innerHTML = "";
        document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 
      } else {//FF 
        path = URL.createObjectURL(imgFile.files[0]);
        document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>";
      }
    }
  }
</script>
</head>
<body>
  <div>
    <input type="file" onchange='PreviewImage(this)' />
    <div id="imgPreview" style='width: 500px; height: 400px;'>
      <img src="" />
    </div>
  </div>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

JavaScript实现预览本地上传图片功能完整示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
详解JavaScript 的变量
Mar 08 #Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 #Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 #Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 #Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 #Javascript
详解小程序循环require之坑
Mar 08 #Javascript
详解js 创建对象的几种方法
Mar 08 #Javascript
You might like
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Django values()和value_list()的使用
2020/03/31 Python
用Python进行websocket接口测试
2020/10/16 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
职工代表大会主持词
2014/04/01 职场文书
贷款担保书范文
2014/05/13 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
七年级上册生物的课件
2019/08/07 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers