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 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php构造函数实例讲解
2013/11/13 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
抗洪抢险事迹材料
2014/05/06 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
专家推荐信怎么写
2015/03/25 职场文书
优质护理服务心得体会
2016/01/22 职场文书