正文

js实现图片上传本地预览

author  author  2022-08-02  621

关键词：

<!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="">
</div>
     
      
    <input type="file" onchange="previewImage(this)" />     
</body>     
</html>

js上传图片本地预览缓存

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文件上传</title><scriptsrc="jQuery.js"></script><styletype="text/css">#file{display:block;width: 查看详情

js实现的图片预览功能

之前的博文有实现过图片上传预览，但那种方法是预览时就将图片上传，会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览，就说用js将上传的图片显示，上传代码在之前的博文中有写到。以下是实现的代码：body... 查看详情

js实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。<!DOCTYPEhtml><html><head><title>Title</title><linkhref="~/Content/Css/bootstrap.3.3.4.min.css"rel="stylesheet"/><scr 查看详情

本地多个图片上传预览，删除

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="js/jquery-2.1.4.min.js"type="text/javascript"charset="utf-8"></s 查看详情

上传图片时预览

...选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。1.首先，页面上有一个input[type=‘file‘]标签<inputid="head"name="headPortrait"class="btnbtn-xmbtn-outlinebtn-primary"style="margin:0auto"type="file"value 查看详情

js前端实现多图图片上传预览

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面</title><scripttype="text/javascript">// 查看详情

浅谈js本地图片预览

　　最近在工作中遇到一个问题，就是实现一个反馈页面，这个反馈页面的元素有反馈主题、反馈类型、反馈内容、反馈人联系电话以及反馈图片。前端将这些反馈的元素POST给后台提供的接口；实现这个工作的步骤就是：页面... 查看详情

javascript实现本地图片上传预览功能（兼容iechromeff）(代码片段)

...传前预览、编辑；最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome... 查看详情

js实现图片上传预览功能，使用base64编码来实现

实现图片上传的方法有很多，这里我们介绍比较简单的一种，使用base64对图片信息进行编码，然后直接将图片的base64信息存到数据库。但是对于系统中需要上传的图片较多时并不建议采用这种方式，我们一般会选择存图片路径的... 查看详情

3种上传图片并实现预览的方法

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图... 查看详情

jquery图片上传前先在本地预览（不经过后端处理）

前段时间遇到一个问题，前端想实现图片上传预览（不经过后端PHP或JAVA处理），用户点击file按钮上传文件，点击确定马上就能看到预览的效果，但在实现的时候无论怎样都取不到file上图片的真实路径，得到的反而是C:fakepatha.jpg... 查看详情

jquery:[1]实现图片上传并预览

jQuery:[1]实现图片上传并预览原理预览思路1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL；2.把对象URL赋值给实现写好的img标签的src属性File对象　　File对象可以用来获取文件的信息，还可以用来读取这... 查看详情

移动端js实现图片上传预览

方法一：<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面</title><scripttype="text/javascript"&g 查看详情

微信小程序如何给服务器上传多张图片,微信小程序实现上传多张本地图片到服务器和图片预览...

1，前言最近在写小程序，用到了wx.uploadFile方法，发现这方法居然不支持同时上传多个文件，于是自己写了一个上传多个的方法。[图片上传失败...(image-c4d973-1610865751169)]2，需求博主做的是用户投诉页面；需... 查看详情

简单实现图片上传预览

/*-----Title-----*/<scripttype="text/javascript"src="Script/jquery-1.4.1.min.js"></script>/*-----JQuery-----*/<scripttype="text/javascript">$(function(){$(‘.selectPic‘).change(functi 查看详情

图片上传组件开发(代码片段)

...一个常用的功能，在不同的项目中有不同的需求，在这里实现一个比价基本的上传图片插件，主要能实现图片的浏览，剪裁，上传这三个功能，同时也是为了让自己对图片／文件上传和HTML5中名声在外的canvas相关能够有一些了解... 查看详情

jquery实现图片预览

摘自：http://www.cnblogs.com/leejersey/p/3660202.htmlJS代码：/**名称:图片上传本地预览插件v1.1*作者:周祥*时间:2013年11月26日*介绍:基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE谷歌火狐)不支持safari*插件网站:http://keleyi.com/keleyi/phtml/im... 查看详情

本地上传图片预览

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>图片上传本地预览，获得图片的base64(可压缩)</title><styletype="text/css">.uplo 查看详情