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 相关文章推荐
javascript事件模型代码
Jul 01 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
ant-design-vue按需加载的坑的解决
May 14 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
PHP5中MVC结构学习
2006/10/09 PHP
基于mysql的bbs设计(三)
2006/10/09 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP整合PayPal支付
2015/06/11 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
获取body标签的两种方法
2011/10/13 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python while循环使用else语句代码实例
2020/02/07 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
保荐人的岗位职责
2013/11/19 职场文书
班级德育工作实施方案
2014/02/21 职场文书
入党自荐书范文
2014/03/09 职场文书
教研活动主持词
2015/07/03 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技