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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
javascript数组详解
Oct 22 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
angular实现form验证实例代码
Jan 17 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP 变量的定义方法
2010/01/26 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
javascript 验证日期的函数
2010/03/18 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
Vue基础配置讲解
2019/11/29 Javascript
js实现3D旋转效果
2020/08/18 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
python去除文件中重复的行实例
2018/06/29 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
电焊工岗位职责
2014/03/06 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
辞职信标准格式
2015/02/27 职场文书
应收账款管理制度
2015/08/06 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript