工作中遇到的，总结下来了，图片上传本地预览限制图片最大为2M

图片上传本地预览

#preview1{width:260px;height:190px;border:1px solid #000;overflow:hidden;}

#imghead1 {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

#preview2{width:260px;height:190px;border:1px solid #000;overflow:hidden;}

#imghead2 {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

#preview3{width:260px;height:190px;border:1px solid #000;overflow:hidden;}

#imghead3 {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

//图片上传预览 IE是用了滤镜。

function previewImage1(file)

{

var MAXWIDTH = 260;

var MAXHEIGHT = 180;

var div = document.getElementById('preview1');

if (file.files && file.files[0])

{

div.innerHTML ='';

var img = document.getElementById('imghead1');

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,class="lazyload" src="https://img-blog.csdnimg.cn/2022010612535252903.png" data-original="';

file.select();

file.blur();

var src = document.selection.createRange().text;

div.innerHTML = '';

var img = document.getElementById('imghead1');

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 = "

}

}

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;

}

function getPhotoSize1(obj){

var fileSize = 0;

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

if (isIE && !obj.files) {

fileSize = file.Size;

}else {

fileSize = obj.files[0].size;

}

fileSize=Math.round(fileSize/1024*100)/100; //单位为KB

if(fileSize>=2048){

alert("照片最大尺寸为2MB，请重新上传!");

}else{

previewImage1(obj);

}

}

//图片上传预览 IE是用了滤镜。

function previewImage2(file)

{

var MAXWIDTH = 260;

var MAXHEIGHT = 180;

var div = document.getElementById('preview2');

if (file.files && file.files[0])

{

div.innerHTML ='';

var img = document.getElementById('imghead2');

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,class="lazyload" src="https://img-blog.csdnimg.cn/2022010612535252903.png" data-original="';

file.select();

file.blur();

var src = document.selection.createRange().text;

div.innerHTML = '';

var img = document.getElementById('imghead2');

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 = "

}

}

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;

}

function getPhotoSize2(obj){

var fileSize = 0;

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

if (isIE && !obj.files) {

fileSize = file.Size;

}else {

fileSize = obj.files[0].size;

}

fileSize=Math.round(fileSize/1024*100)/100; //单位为KB

if(fileSize>=2048){

alert("照片最大尺寸为2MB，请重新上传!");

}else{

previewImage2(obj);

}

}

//图片上传预览 IE是用了滤镜。

function previewImage3(file)

{

var MAXWIDTH = 260;

var MAXHEIGHT = 180;

var div = document.getElementById('preview3');

if (file.files && file.files[0])

{

div.innerHTML ='';

var img = document.getElementById('imghead3');

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,class="lazyload" src="https://img-blog.csdnimg.cn/2022010612535252903.png" data-original="';

file.select();

file.blur();

var src = document.selection.createRange().text;

div.innerHTML = '';

var img = document.getElementById('imghead3');

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 = "

}

}

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;

function getPhotoSize3(obj){

var fileSize = 0;

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

if (isIE && !obj.files) {

fileSize = file.Size;

}else {

fileSize = obj.files[0].size;

}

fileSize=Math.round(fileSize/1024*100)/100; //单位为KB

if(fileSize>=2048){

alert("照片最大尺寸为2MB，请重新上传!");

}else{

previewImage3(obj);

}

}

}

html ie8上传图片,图片上传本地预览兼容ie8相关推荐

  1. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...

  2. 图片上传本地预览(回显)插件

    图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看 请下载完整的js和css样式,以及Demo <html><title>文件上传</title>< ...

  3. js实现网页图片上传本地预览

    [实现效果] [相关代码] [HTML] <div id="preview"><div class="single_pic" id=" ...

  4. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  5. ajax上传图片并显示,Ajax实现图片上传并预览

    效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...

  6. input文件框选择本地图片后页面预览图片并获取图片长宽以及大小 图片上传前预览

    前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...

  7. layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能

    html代码 上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...

  8. MUI学习笔记之图片上传和预览

    MUI学习笔记之图片上传和预览 源代码是从博客园下载 我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...

  9. uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览

    目录 一.网络请求 1.1 发送get请求 二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...

最新文章

  1. windows下vim高亮systemverilog
  2. bzoj1051 [HAOI2006]受欢迎的牛 tarjan缩点
  3. SAP Hybris的类型系统更改和ABAP的LOAD_PROGRAM_TABLE_MISMATCH
  4. JAVA 分布式环境 Redis互斥锁
  5. android opencv 银行卡识别,NDK 开发之使用 OpenCV 实现银行卡号识别
  6. 面试官，再也别问我的系统如何支持高并发了
  7. Access中的SELECT @@IDENTITY
  8. I00034 累加与累乘
  9. 伪代码之KMeans和DBSCAN
  10. 斯坦福大学Andrew Ng教授主讲的《机器学习》公开课观后感
  11. OkHttp中的设计模式之一：Builder模式
  12. 经典教材《晶体管电路设计》
  13. 小米9开发版刷稳定版心得体验
  14. 【转】影响光纤传输距离的因数和传输衰减损耗的原因
  15. 点积与叉乘的运算与物理意义
  16. visual studio code无法生成可执行文件
  17. 【数据结构】各种数据结构的简单特点
  18. Android录制或播放语音消息时关闭其他媒体播放
  19. 一次内存泄漏的问题记录
  20. android All

热门文章

  1. 解析HetuEngine实现On Yarn原理
  2. 技术实践丨如何解决异步接口请求快慢不均导致的数据错误问题？
  3. 【IoT最佳实践】设备获取实时天气DEMO代码解读
  4. #化鲲为鹏，我有话说# 鲲鹏弹性云服务器配置 Tomcat
  5. Vue-Router中History模式【华为云分享】
  6. Python中lambda的使用，与它的三个好基友介绍！
  7. Python文本转化语音模块大比拼，看看青铜与王者的差别！
  8. 野生前端的数据结构基础练习（5）——散列
  9. 大前端的自动化工厂（5）—— 基于Karma+Mocha+Chai的单元测试和接口测试
  10. Android笔记 隐式意图demo