JS实现图片上传预览功能


Posted in Javascript onNovember 21, 2016

废话不多说了,直接给大家贴js代码了,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
</head>
<body>
  <div id="divPreview">
    <img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"
      alt="" />
  </div>
  <input type="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" />
  <script type="text/javascript">
    //js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
    function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
      var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
      var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
      var browserVersion = window.navigator.userAgent.toUpperCase();
      if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等
          if (window.FileReader) {
            var reader = new FileReader();
            reader.onload = function (e) {
              document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
            }
            reader.readAsDataURL(fileObj.files[0]);
          } else if (browserVersion.indexOf("SAFARI") > -1) {
            alert("不支持Safari6.0以下浏览器的图片预览!");
          }
        } else if (browserVersion.indexOf("MSIE") > -1) {
          if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
          } else {//ie[7-9]
            fileObj.select();
            if (browserVersion.indexOf("MSIE 9") > -1)
              fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
            var newPreview = document.getElementById(divPreviewId + "New");
            if (newPreview == null) {
              newPreview = document.createElement("div");
              newPreview.setAttribute("id", divPreviewId + "New");
              newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
              newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
              newPreview.style.border = "solid 1px #d2e2e2";
            }
            newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
            var tempDivPreview = document.getElementById(divPreviewId);
            tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
            tempDivPreview.style.display = "none";
          }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
          var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
          if (firefoxVersion < 7) {//firefox7以下版本
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
          } else {//firefox7.0+          
            document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
          }
        } else {
          document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
      } else {
        alert("仅支持" + allowExtention + "为后缀名的文件!");
        fileObj.value = ""; //清空选中文件
        if (browserVersion.indexOf("MSIE") > -1) {
          fileObj.select();
          document.selection.clear();
        }
        fileObj.outerHTML = fileObj.outerHTML;
      }
      return fileObj.value;  //返回路径
    }
  </script>
</body>
</html>

以上所述是小编给大家介绍的JS实现图片上传预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 #Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 #Javascript
javascript入门之数组[新手必看]
Nov 21 #Javascript
jQuery UI插件实现百度提词器效果
Nov 21 #Javascript
javascript中Number的方法小结
Nov 21 #Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 #Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 #Javascript
You might like
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
python中实现php的var_dump函数功能
2015/01/21 Python
python中kmeans聚类实现代码
2018/02/23 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
深圳茁壮笔试题
2015/05/28 面试题
司机岗位职责
2013/11/15 职场文书
七年级数学教学反思
2014/01/22 职场文书
超市中秋节活动方案
2014/02/12 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
导游词300字
2015/02/13 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
暂住证明怎么写
2015/06/19 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL