本地图片上传预览(兼容ie firefox ，chrome等主流浏览器

最新推荐文章于 2022-06-27 09:29:05 发布
最新推荐文章于 2022-06-27 09:29:05 发布
阅读量896 收藏
点赞数
分类专栏： js
<!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">
#preview{width:200px;height:100px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
function previewImage(file)
{
  var MAXWIDTH  = 200;
  var MAXHEIGHT = 100;
  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
  {
    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;margin-left:"+rect.left+"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=200 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
    <br/>    
    <input type="file" οnchange="previewImage(this)" />    
</body>    
</html>    
wuys
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于HTML5的chrome,firefox预览本地图片(扩展IE兼容)
qingfengxia2013的专栏
07-15 311
http://www.zhangxinxu.com/wordpress/?p=1923第一篇&lt;script type="text/javascript" language="JavaScript" src="http://qingfengxia2.blog.163.com/blog/jquery.js"&gt;&lt;/script&gt;&lt;script type="text/java.
2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
05-07
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括古老的Internet Explorer ...
前端手动获取客户端本地文件夹下图片信息base64
LiuYi000000001的博客
06-27 777
前端手动获取固定文件夹下图片信息
在客户端展示本地图片
af2262的博客
08-07 277
当用户在客户端上请求本地图片的时候，我们需要把本地的图片展示。 1.在控制器端把图片转换成流的形式 2.前台请求控制器端的方法，输出图片 控制器端： public class ImageController : Controller { private static readonly string PATH = @"C:\Users\xiechongx...
socket实现jpg图片的传输
04-15
socket实现jpg图片的传输，分为客户端c.cpp和服务器s.cpp，客户端和服务器建立连接后，就可以接收服务器发送的jpg图片。
客户端程序传送图片到服务器
weixin_34221073的博客
03-05 332
转载：http://www.cnblogs.com/networkcomms/p/4314898.html 源码  （因为空间大小限制，不包含通信框架源码，通信框架源码请另行下载） 以前帮朋友做了一个图片采集系统，客户端采集相片后，通过TCP通信传送到服务器，本文把客户端传送图片到服务器的这部分提取出来。 由于每张图片的大小都不大，所以我们在传输图片时，没有采用传送文件的方式，而是采用了直接...
js图片上传前预览功能（兼容所有浏览器）
11-25
本文将详细讲解如何使用JavaScript实现一个兼容所有主流浏览器的图片上传前预览功能。 首先，我们需要理解HTML5引入的File API，这是实现预览功能的关键。File API允许我们对用户选择的本地文件进行读取、写入和...
兼容IE chrome FF 图片上传前预览
08-05
这段代码是用于在图片上传前实现预览功能的，它兼容了Internet Explorer（IE）、Chrome 和 Firefox 这三种主流浏览器。在用户选择图片文件后，可以在网页上显示一个缩放后的预览图，确保预览图像的宽度和高度不超过...
js加iframe轻松实现异步图片上传 可以预览 兼容FF，chrome，ie9
01-05
本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传，并提供预览功能，同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先，我们需要了解异步上传的基本原理。异步上传，也称为Ajax上传，是指在...
JavaScript读取客户端的文件内容
11-03
JavaScript读取客户端的文件内容，然后再后台中调用
兼容ie6、ie7、ie8 和FF的本地上传图片预览
03-28
标题提到的"兼容ie6、ie7、ie8 和FF的本地上传图片预览"是一个典型的跨浏览器兼容性问题，涉及到的主要知识点包括HTML、JavaScript、CSS以及浏览器差异。 在早期的Web开发中，Internet Explorer（IE）的不同版本，...
关于客户端获取服务器图片的问题
dongzibin的专栏
11-29 1639
最近的项目中，移动设备要从服务器获取图片，发现一个问题，特记录下： 开始web端的做法是，接到请求后去读取图片文件，然后返回数据流，客户端将获取到的数据流在解码成图片， 但是在测试时去发现有时会出现解码失败的情况，通过调试发现是因为数据流有问题，在浏览器中直接打开链接 保存下来的图片是有问题的。 后来将服务器端的读取图片的操作去除，直接访问服务器图片，就可以了。 不会web端开发，不知道
Linux c/c++图片传输功能（中级版）
weixin_30883311的博客
02-25 390
在用C语言完善传输图片模块的时候发现了一个问题！ 就是图片的二进制本质，和c语言的IO流局限！ 以下两个函数是C 的打开图片文件和读取图片文件的函数！ FILE *out=fopen(path,"r"); int c; while((c=fgetc(out))!=EOF)//open /root/photo_in/cat.jpg { ...
后台获取图片信息，在页面展示
qq_40696981的博客
05-26 4608
做的一个项目，有一个展示信息的页面，同时要展示相应的图片。一开始是想用jQuery easyUI的datagrid，但是这个显示效果不好，会出现表格的一些特性，展示图片时会有加减号控制。其实是我想多了，图片就放在本地，数据库表中只是存储的图片的基本信息（ID，URL等），其实可以在后台获取这些信息后直接传到页面，在相应的地方展示出来就可以了。在这我是在一个form表单中展示。后台controlle...
c++ 通过socket(网络套接字)传输图片(客户端)
Sea_muxixi的专栏
08-28 6680
先简单讲一下流程： WinSock初始化->创建Socket->连接connect->传输send->关闭close #pragma comment(lib,"ws2_32.lib") #include 1：WinSock初始化 wVersionRequested = MAKEWORD(2, 2); result = WSAStartup(wVersionRequested,
img标签读取本地图片
热门推荐
苦逼码农的博客
08-06 3万+
/**图片 * @author Administrator * */ @RequestMapping(value="showImg") public void ShowImg(HttpServletRequest request,HttpServletResponse response,@RequestParam("headerUrl") String url)
CSS兼容IE和Firefox的技巧集合
10-27
这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题，确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧，就能够更加轻松地应对不同浏览器的兼容性问题，提高网页的用户体验。因此，对于有关...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值