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 相关文章推荐
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
多种方式实现js图片预览
Dec 12 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 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
linux iconv方法的使用
2011/10/01 PHP
php中static和const关键字用法分析
2016/12/07 PHP
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python有序字典简单实现方法示例
2017/09/28 Python
理解python中生成器用法
2017/12/20 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
清洁工岗位职责
2014/01/29 职场文书
新品发布会主持词
2014/04/02 职场文书
导师推荐信范文
2014/05/09 职场文书
求职信内容怎么写
2014/05/26 职场文书
精神文明建设标语
2014/06/16 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
学籍证明模板
2015/06/18 职场文书