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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JavaScript实现简易计算器小功能
Oct 22 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python 写一个性能测试工具(一)
2020/10/24 Python
财务部岗位职责
2013/11/19 职场文书
音乐教学反思
2014/02/02 职场文书
《学会待客》教学反思
2014/02/22 职场文书
留学顾问岗位职责
2014/04/14 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
维稳承诺书
2015/01/20 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android