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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
详解webpack运行Babel教程
Jun 13 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php curl基本操作详解
2013/07/23 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
Python写的服务监控程序实例
2015/01/31 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python多线程并发及测试框架案例
2019/10/15 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
python中tab键是什么意思
2020/06/18 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
见习期自我鉴定范文
2014/03/19 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Redis 哨兵机制及配置实现
2022/03/25 Redis
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL