js实现上传图片及时预览

最新推荐文章于 2024-06-16 18:09:06 发布
最新推荐文章于 2024-06-16 18:09:06 发布
阅读量95 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/ShanHeDiao/p/5078479.html
版权

 

<!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: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>

 

 

 

<! 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: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 >

转载于:https://www.cnblogs.com/ShanHeDiao/p/5078479.html

Sherry198786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片
weixin_39909001的博客
02-23 358
1、多文件上传：http://blog.csdn.net/a1314517love/article/details/241832732、单文件上传的简单示例：http://blog.csdn.net/cheung1021/article/details/70846733、springMVC+ajaxfileupload异步上传图片并及时预览http://www.codeweblog.com/spr...
上传图片文件并立即显示到页面使用 javascript实现鼠标拖动画矩形框以及实现固定区域内随意拖动...
weixin_30359021的博客
09-09 183
首先，你要设计好鼠标事件处理方法，主要是鼠标左键点击，左键释放，还有鼠标移动方法其次，要了解容什么方式，画一个矩形，设计一个方法：DrawRectgle(左上角，右下角），并且要确定当调用这个方法时，要把原来已经画好的矩形清除掉（或者是根据左上，右下坐标，调整矩形的大小，这样的话，就不用清除原有的矩形） 在鼠标左键按下事件中，获取鼠标位置，保存为左上角坐标，设置开始画矩...
JS实现上传图片的三种方法并实现预览图片功能
热门推荐
djl的专栏，blog.djl.cx好记
09-10 3万+
在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。 常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面； 另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。 这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不...
js实现上传图片的及时预览
linshenshijianlu的博客
08-28 364
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 上传照片预览 #preview,.img,img{ width:200px; height:200px; } #preview{ border:1px solid #000;
JS实现上传图片及时预览
weixin_38171245的博客
11-26 44
<!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" > <he...
php 上传图片返回预览,JS实现上传图片的三种方法并实现预览图片功能
weixin_28902341的博客
03-11 296
在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持)。以下...
[JavaScript] JS实现上传图片及时预览
岑国程
11-14 1068
图片上传本地预览 #preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} /
JS中FileReader类实现文件上传及时预览功能
10-15
主要为大家详细介绍了JS中FileReader类实现文件上传及时预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图片上传及时预览
12-12
js图片上传图片及时预览效果，支持各种浏览器！
JS实现上传图片实时预览
qq_37996815的博客
09-19 367
ie亲测有效 在进行项目开发时，对图片上传功能一直比较模糊，上传并预览图片效果难以实现。 经过上网搜索资料，发现网上流传出来的多图上传功能代码不全，后台接收文件只能收到最后添加的一张图片。 以下代码实现，单张图片上传并本地实时预览的效果，经测试，兼容性还不错。 #preview, .img, img { width: 200px; height:
angular 上传图片并显示_Angularjs实现上传图片预览功能
weixin_39872334的博客
12-22 166
废话不多说了，直接给大家贴代码了，具体代码如下所示：app.factory("fileReader", function($q, $log) {var onLoad = function(reader, deferred, scope) {return function () {scope.$apply(function () {deferred.resolve(reader....
css引入方式有几种？link和@import有什么区别？
tianxianghuiwei的博客
06-13 299
link>标签和@import规则。<link>这种方式是在HTML文档的<head>部分或者XHTML文档的<head>或<body>部分添加<link>标签，通过href属性指定外部样式表的URL。<link>标签会在页面加载时同时加载并解析外部样式表，从而使得样式可以立即生效。@import@import规则是在CSS文件中使用的一种方式，用于引入外部样式表。它需要写在CSS文件的顶部（除了可能的@charset声明），并且只能引入一次。@import规则相对于<link>
工具链--nuxt框架 简介（一）
最新发布
qq_35876316的博客
06-16 333
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1434
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 555
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
javaweb实现上传图片且预览
06-02
3. 在JavaScript中实现预览图片的功能。 ``` function previewImage() { // 获取选择的文件对象 var file = document.getElementById("fileInput").files[0]; // 创建FileReader对象 var reader = new ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值