JavaScript实现图片本地预览功能【不用上传至服务器】


Posted in Javascript onSeptember 20, 2017

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

实现一个在file文件域中选定图片文件之后,马上进行预览。不用预上传到服务器,整缩略图再打回前端用Ajax去预览的。直接利用JavaScript即可以完成,而且还可以兼容IE6。具体效果,如下图所示:

JavaScript实现图片本地预览功能【不用上传至服务器】

具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现。具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片上传本地预览</title>
    <style type="text/css">
      /*设置IE滤镜,这里的id=imghead要与下方利用Javascript生成div的id相呼应。*/
      #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    </style>
    <script type="text/javascript">
      //图片上传预览,非IE则用了HTML5的代码,IE是用了滤镜
      function previewImage(file, MAXWIDTH, MAXHEIGHT){//MAXWIDTH、MAXHEIGHT与放预览图片的DIV——preview的大小相呼应
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {//HTML5部分
          div.innerHTML = "<img id='imghead'></img>";
          var img = document.getElementById('imghead');
          img.onload = function(){
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            img.width = rect.width;
            img.height = rect.height;
            img.style.marginTop = rect.top + 'px';
          }
          var reader = new FileReader();
          reader.onload = function(evt){
            img.src = evt.target.result;
          }
          reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
          var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
          file.select();
          var src = document.selection.createRange().text;
          div.innerHTML = "<img id='imghead'></img>";
          var img = document.getElementById('imghead');
          img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
          var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
          div.innerHTML = "<div style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
        }
      }
      //用于计算预览图片的大小
      function clacImgZoomParam(maxWidth, maxHeight, width, height){
        var param = {
          top: 0,
          left: 0,
          width: width,
          height: height
        };
        if (width > maxWidth || height > maxHeight) {
          rateWidth = width / maxWidth;
          rateHeight = height / maxHeight;
          if (rateWidth > rateHeight) {
            param.width = maxWidth;
            param.height = Math.round(height / rateWidth);
          }
          else {
            param.width = Math.round(width / rateHeight);
            param.height = maxHeight;
          }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
      }
    </script>
  </head>
  <body>
    <div id="preview" style="width:320px;height:240px;"></div><!--用来放预览图片的DIV-->
    <input type="file" onchange="previewImage(this,320,240)" accept="image/*" /><!--一旦用户选择了图片文件,则触发上方的previewImage函数-->
  </body>
</html>

首先在preview这个放图片预览的div中生成一个id=imghead的div。

非IE部分,用HTML5直接可以读取用户选择的文件,通过function clacImgZoomParam(maxWidth, maxHeight, width, height)计算出预览图片的大小,之后直接可以将这张图片放到id=imghead这个div中。如果是IE,生成的id=imghead的div会被赋予在style标签设置好的滤镜,通过滤镜将用户选择的图片文件加载上去,再用clacImgZoomParam函数求其大小,得到大小之后,清除preview中的所有内容,正式生成被赋予图片滤镜,其大小确定的div上去。

<input type="file">文件域也用到accept="image/*"这个HTML5功能用来限制用户只能选择图片文件,但是,在提交表单的时候,还应该通过onSubmit判断,同时更应该在服务器后台判断,防止用户送些奇奇怪怪的东西到服务器。

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

Javascript 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
js模拟类继承小例子
Jul 17 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
axios post提交formdata的实例
Mar 16 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 #Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 #Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
Vue-cli创建项目从单页面到多页面的方法
Sep 20 #Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 #Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 #Javascript
You might like
递归列出所有文件和目录
2006/10/09 PHP
php 动态添加记录
2009/03/10 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
python 运算符 供重载参考
2009/06/11 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
实时获取Python的print输出流方法
2019/01/07 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python 装饰器的基本使用
2021/01/13 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
电子商务专业应届生求职信
2014/05/28 职场文书
廉政教育的心得体会
2014/09/01 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
2015年教师节主持词
2015/07/03 职场文书