JavaScript实现本map片下传预览功能（兼容IE、chrome、FF）-JavaSript-爱易网页

JavaScript实现本map片下传预览功能（兼容IE、chrome、FF）

日期：2014-05-16　浏览次数：20440 次

JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

摘要

本人个人nodejs分享论坛：tnodejs.com

参考：http://blog.csdn.net/nhconch/article/details/7295456

需要解决的问题有：本地图片如何在上传前预览、编辑；
最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。

关键词：imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果

一、实现上传前预览
1.1、页面显示
代码1-1显示的是html需要展示的web页面信息

<!—预览图片显示区域-->
<div id=”image_area”>
<img id="biuuu"src="#" title="biuuu">
</div>
<!—图片上传区域-->
<div id =”upload_area”>
<form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data' method = 'POST'>
<input type="file"id="picpath" name="atvatar_image">
<a href="javascript:void(0);"class="button"> 上传照片</a>
<input type='text'name="path" readonly>
<div id = “submit_button”>
<a href="javascript:void(0);"class='button'>确认</a>
</div>

代码1-1

为了修改input file的按钮名称，我们添加了一段代码，这个在第二节将会详细说明

<a href="javascript:void(0);" class="button">上传照片</a>
<input type='text'name="path" readonly>

1.2、实现预览在线编辑
这里我们主要使用了一个插件进行图片编辑，如果需要具体查看学习可查看网址
http://odyniec.net/projects/imgareaselect/，使用方法还是很简单方便的。

$('#biuuu').imgAreaSelect({
aspectRatio:'1:1', //截取比例
show:true,
resizable:true, //是否可调整大小
autoHide: false,//选择框选择完毕是否自己取消
handles:true,
key:true, //是否启用键盘，默认为false
//x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域，原始的
//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标
keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小
//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框
onSelectChange:preview //选框移动时触发的事件
//onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件
});

代码1-2

代码1-2主要是设置需要编辑图片的一些插件属性，具体查看插件的参量说明。
首先我们需要创建一个预览小图片在img之后

$('<div><imgid="view" src='+atvatarUrl+' style="position: relative;"/></div>')
.css({
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后

代码1-3

代码1-3是创建一个小预览图片在img之后

1.3、实现在线预览功能

function previewImage(file)
{
var porImg = $('#biuuu'),//首先获取大图片jquery对象
viewImg = $('#view');//小图片jquery对象
//判断该浏览器是否为w3c标准，既非IE浏览器 
if (file["files"] && file["files"][0])
{
//使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究
var reader = newFileReader();
reader.onload =function(evt){
porImg.attr({src :evt.target.result});
viewImg.attr({src: evt.target.result});
}
reader.readAsDataURL(file.files[0]);
}
//如果是IE浏览器，采用滤镜效果，进行显示，但特别注意的是该滤镜效果使用的对象是div对象，并非img对象，因此我们需要将原有的img对象remove同时生成新的div对象，并且赋值相应的class和id
else
{
//创建需要滤镜显示的div的dom对象
var ieImageDom =document.createElement("div");
var proIeImageDom =document.createElement("div");
//设置对象的css属性和原有的img对象属性相同，添加相应的id属性值
$(ieImageDom).css({
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).attr({"id":"view"});
$(proIeImageDom).


                        <div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="39072">上一篇： ssh如何知道删除实体成不成功 </a></li>

                            <li class="next"><a href="27890">下一篇： JavaScript中的作用域链跟闭包 </a></li>
                        </ul>
                    </nav>


                    <div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

                    

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/javasript/">更多></a></span></h3>
    </div>
    <div class="panel-body row">
        <ol>

            
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/20778' title=' js+DOM创设和操作节点 ' target="_blank">
                         js+DOM创设和操作节点 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/1957' title=' 使用javascript跟canvas画月半弯 ' target="_blank">
                         使用javascript跟canvas画月半弯 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/19175' title=' 通过js传递上拉列表值的举例 ' target="_blank">
                         通过js传递上拉列表值的举例 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/14660' title=' JavaScript中的Array的创设方式和Array与Map的应用 ' target="_blank">
                         JavaScript中的Array的创设方式和Array与Map的应用 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/33455' title=' 怎么设置控件的disable状态下的样式使其看起来和enable的状态一样 ' target="_blank">
                         怎么设置控件的disable状态下的样式使其看起来和enable的状态一样 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/27298' title=' js getElementById有关问题 ' target="_blank">
                         js getElementById有关问题 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/35063' title=' IE JScript第3种内存泄漏方式的有关问题。如果没有人能回答小弟我得上微软那里问了 ' target="_blank">
                         IE JScript第3种内存泄漏方式的有关问题。如果没有人能回答小弟我得上微软那里问了 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/16442' title=' 详细引见五种JSP跳转方法 ' target="_blank">
                         详细引见五种JSP跳转方法 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/javasript/24417' title=' jquery.cookies.2.2.0+半小时后自动跳转至sessionView.jsp提醒session过期 ' target="_blank">
                         jquery.cookies.2.2.0+半小时后自动跳转至sessionView.jsp提醒session过期 </a></li></div>
                   
                
        </ol>
    </div>
</div>


                </div>

                <div class="col-lg-4 hidden-sm hidden-xs">
                    <!--右边的内容-->
                    <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/cloud/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/vps1.png" alt="香港云服务器 免备案 云主机VPS 国内 独立IP 独享15M 月付SSD" /></a>

                    <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script>
                    <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script>
                    <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script>
                    
<div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/javasript/">更多></a></span></h3>
      </div>
      <div class="panel-body">
          <ol>
        
                       <li class="articleAbout"><a href=/javasript/3212  title=' 关于JS 联动，下拉框选项前前后后选择个数不同 ' target="_blank">
                             关于JS 联动，下拉框选项前前后后选择个数不同 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/13678  title=' jquery or javascript？该怎么处理 ' target="_blank">
                             jquery or javascript？该怎么处理 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/4256  title=' 怎么实现类似与日历控件的那种效果 ' target="_blank">
                             怎么实现类似与日历控件的那种效果 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/35970  title=' 有没有方法给html进行编码？解决方法 ' target="_blank">
                             有没有方法给html进行编码？解决方法 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/3557  title=' 【D3.V3.js系列课程】（二十）-交互图标之条形图排序 ' target="_blank">
                             【D3.V3.js系列课程】（二十）-交互图标之条形图排序 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/38978  title=' 一个很精致(个人是这么认为的，尽管没有界面)的JavaScript贪吃蛇游戏解决思路 ' target="_blank">
                             一个很精致(个人是这么认为的，尽管没有界面)的JavaScript贪吃蛇游戏解决思路 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/5704  title=' 一段关于时间处理的JS代码，IE浏览器下兼容有关问题 ' target="_blank">
                             一段关于时间处理的JS代码，IE浏览器下兼容有关问题 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/28573  title=' jqGrid ajax 互弄,json object 互搞 ' target="_blank">
                             jqGrid ajax 互弄,json object 互搞 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/9679  title=' Iframe在不同域名上修改父框架src ' target="_blank">
                             Iframe在不同域名上修改父框架src </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/19919  title=' JSON诠释 ' target="_blank">
                             JSON诠释 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/6628  title=' extjs 查询内容展示 ' target="_blank">
                             extjs 查询内容展示 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/28305  title=' 一个js登陆应验例子 经典 ' target="_blank">
                             一个js登陆应验例子 经典 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/4629  title=' JSP代码小范例 ' target="_blank">
                             JSP代码小范例 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/25266  title=' struts2 怎么获取jsp中radio的值 ' target="_blank">
                             struts2 怎么获取jsp中radio的值 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/26959  title=' js正则表达式的轮换空格 ' target="_blank">
                             js正则表达式的轮换空格 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/3682  title=' 基于Backbone.js的JavaScript MVC示范程序(4) ' target="_blank">
                             基于Backbone.js的JavaScript MVC示范程序(4) </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/20503  title=' js去掉金额中的 ' target="_blank">
                             js去掉金额中的 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/29067  title=' RequireJS入门（1） ' target="_blank">
                             RequireJS入门（1） </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/37379  title=' 请问关于event能否传递 ' target="_blank">
                             请问关于event能否传递 </a></li>
                    
                       <li class="articleAbout"><a href=/javasript/18391  title=' extjs 相干PPT ' target="_blank">
                             extjs 相干PPT </a></li>
                    
            </ol>
      </div>
</div>

                </div>
            </div>
            <div class="clearfix"></div>

            
    <footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>


 

Copyright © 2013-2024 爱易网页 当前在线：685人　
        网站在2时20分25秒内访问总人数：91213人
    当前 30.24%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>




</footer>


        </div>
   
</body>
</html>