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 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
通过url查找a元素并点击
Apr 09 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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 开发工具
2006/12/06 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
python文件操作相关知识点总结整理
2016/02/22 Python
Python heapq使用详解及实例代码
2017/01/25 Python
原生python实现knn分类算法
2019/10/24 Python
python 操作hive pyhs2方式
2019/12/21 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Django实现内容缓存实例方法
2020/06/30 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
this关键字的含义
2015/04/08 面试题
安全检查验收制度
2014/01/12 职场文书
安全生产投入制度
2014/01/29 职场文书
授权委托书
2014/07/31 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
趣味运动会广播稿
2015/08/19 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript