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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
JavaScript接口实现方法实例分析
May 16 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
推荐文章系统(一)
2006/10/09 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
python缩进区别分析
2014/02/15 Python
Python中列表(list)操作方法汇总
2014/08/18 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python迭代和迭代器详解
2016/11/10 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python 修改本地网络配置的方法
2019/08/14 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
文明礼仪事迹材料
2014/01/09 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
考博导师推荐信范文
2015/03/27 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
入团介绍人意见范文
2015/06/04 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
宾馆安全管理制度
2015/08/06 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang