jQuery实现本地预览上传图片功能


Posted in Javascript onJanuary 08, 2016

本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下

HTML代码:

<html>
<head>
<title>图片上传预览演示</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="16/uploadPreview.js" type="text/javascript"></script>
<script>
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2>
<a href="# target="_blank">原文</a>

<div><img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
</div>

</body>
</html>

js代码:

*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法: 
<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
this.value = "";
return false
}
if ($.browser.msie) {
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});

直接上第二段代码,jquery js实现上传图片之前预览本地图片

<style type="text/css">
#preview_wrapper{  
  display:inline-block;  
  width:300px;  
  height:300px;  
  background-color:#CCC;
}  
#preview_fake{  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);  
}  
#preview_size_fake{  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);   
  visibility:hidden;  
}  
#preview{  
  width:300px;  
  height:300px;  
}  
</style>

<script type="text/javascript">
function onUploadImgChange(sender){  
  if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){  
    alert('图片格式无效!');  
    return false;  
  }
  var objPreview = document.getElementByIdx_x('preview');  
  var objPreviewFake = document.getElementByIdx_x('preview_fake');  
  var objPreviewSizeFake = document.getElementByIdx_x('preview_size_fake');
  if( sender.files && sender.files[0] ){  
    objPreview.style.display = 'block';  
    objPreview.style.width = 'auto';  
    objPreview.style.height = 'auto';  
      
    // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径  
    objPreview.src = sender.files[0].getAsDataURL();    
  }else if( objPreviewFake.filters ){  
    // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果  
    //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决  
      
    // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径  
    sender.select();  
    var imgSrc = document.selection.createRange().text;  
      
    objPreviewFake.filters.item(  
      'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  
    objPreviewSizeFake.filters.item(  
      'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  
      
    autoSizePreview( objPreviewFake,  
      objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );  
    objPreview.style.display = 'none';  
  }  
}  
 
function onPreviewLoad(sender){  
  autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );  
}  
 
function autoSizePreview( objPre, originalWidth, originalHeight ){  
  var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );  
  objPre.style.width = zoomParam.width + 'px';  
  objPre.style.height = zoomParam.height + 'px';  
  objPre.style.marginTop = zoomParam.top + 'px';  
  objPre.style.marginLeft = zoomParam.left + 'px';  
}  
 
function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
  var param = { width:width, height:height, top:0, left:0 };  
    
  if( width>maxWidth || height>maxHeight ){  
    rateWidth = width / maxWidth;  
    rateHeight = height / maxHeight;  
      
    if( rateWidth > rateHeight ){  
      param.width = maxWidth;  
      param.height = height / rateWidth;  
    }else{  
      param.width = width / rateHeight;  
      param.height = maxHeight;  
    }  
  }  
    
  param.left = (maxWidth - param.width) / 2;  
  param.top = (maxHeight - param.height) / 2;  
    
  return param;  
}
</script>
 
<input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/>
 
<!--以下是预览图片用的-->
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" src="" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/>
<img id="preview_size_fake" />

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
jQuery自定义滚动条完整实例
Jan 08 #Javascript
javascript正则表达式定义(语法)总结
Jan 08 #Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 #Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 #Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 #Javascript
javascript中select下拉框的用法总结
Jan 07 #Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
python多重继承实例
2014/10/11 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python collections模块使用方法详解
2019/08/28 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
诚信承诺书模板
2014/05/26 职场文书
留守儿童工作方案
2014/06/02 职场文书
义卖募捐活动总结
2015/05/09 职场文书
纪委立案决定书
2015/06/24 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers