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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
Jquery性能优化详解
May 15 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
Javascript动画效果(2)
Oct 11 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php根据年月获取季度的方法
2014/03/31 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python进度条的制作代码实例
2019/08/31 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
工程安全生产协议书
2014/11/21 职场文书
2015年公司工作总结
2015/04/25 职场文书
行政复议答复书
2015/07/01 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python