js上传图片预览的实现方法_网络技术_宿州市腾雀网络科技有限公司

js上传图片预览的实现方法

发布时间 - 2026-01-11 01:03:00 点击率：次

本文实例为大家分享了js上传图片预览的方法，供大家参考，具体内容如下

<html >

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>图片上传本地预览</title>  
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">


    //图片上传预览 IE是用了滤镜。
  function previewImage(file)
  {
   var MAXWIDTH = 260; 
   var MAXHEIGHT = 180;
   var div = document.getElementById('preview');
   if (file.files && file.files[0])
   {
    div.innerHTML ='<img id=imghead>';
    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.marginLeft = rect.left+'px';
    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>';
   var img = document.getElementById('imghead');
   img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
   var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
   status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
   div.innerHTML = "<div id=divhead 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">
 <img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>


 <input type="file" onchange="previewImage(this)" />  
</body>  
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js上传图片预览方法 # js上传图片预览 # js图片预览 # javascript HTML5文件上传FileReader API # 借助FileReader实现将文件编码为Base64后通过AJAX上传 # 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法 # File # FileReader 和 Ajax 文件上传实例分析(php) # node.js读取文件到字符串的方法 # node.js实现逐行读取文件内容的代码 # PHP 读取文件内容代码(txt # js等) # JSP读取文件实例 # JavaScript使用readAsDataUrl方法预览图片 # JavaScript通过filereader接口读取文件 # 滤镜 # 图片上传 # 用了 # 大家分享 # 上传图片 # 具体内容 # 大家多多 # solid # border # hidden # overflow # width # preview # css # height # px # imghead # javascript # script # image

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Linux如何压缩解压文件 tar命令常用操作

下一篇：Excel中VLOOKUP函数怎么自动化匹配_ExcelVL

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Linux如何压缩解压文件 tar命令常用操作

下一篇：Excel中VLOOKUP函数怎么自动化匹配_ExcelVL