您的位置：首页 > Web前端 > JQuery

html上传图片预览,jquery实现

2016-03-31 12:55 253 查看

想必大家在做图片上传时大部分都会在图片没有上传之前先进行本地预览，事情说起来简单，但是由于各大浏览器都有各自安全机制，需要实现图片预览就变得有点小麻烦，本文便是介绍笔者利用jquery实现在不同浏览器在图片上传时进行预览的jquery插件。现在分享给大家参考，如有任何改进或建议请一定要为笔者指出。(插件使用需要引入jquery)

js文件jqueryExtends.js

$.fn.extend({
/**
* 图片上传本地预览
* 参数说明：
* imgId：image节点对象(必填)
* imgType：图片格式限制数组(可选)
* callBack：回调函数(可选)
* message：图片格式错误时是否弹出消息(可选boolean)
*/
imgPreview:function(imgId,imgType,callBack,message){
var url = $(this).val();
var opts = {
imgType:["jpg","jpeg","gif","png","bmp"],
message:function(statu){
if(statu){
alert("您选择的图片有误，仅支持" + this.imgType.join("、") + "图片格式上传！");
}
},
callBack:function(data){}
};
//如果省略了参数，则进行参数转换
if($.isFunction(imgType)){
callBack = imgType;
imgType = opts.imgType;
}else if($.type(imgType) === "boolean"){
message = imgType;
imgType = opts.imgType;
callBack = opts.callBack();
}
if($.type(callBack) === "boolean"){
message = callBack;
callBack = opts.callBack();
}
if(message === undefined){
message = true;
}
//合并对象
opts = $.extend(opts,{"imgType":imgType,"callBack":callBack});
//图片格式验证
if (!RegExp("\.(" + opts.imgType.join("|").toLowerCase() + ")$", "i").test(url.toLowerCase())) {
//执行回调函数
opts.callBack(false);
//清空file
this.defaultValue = "";
//消息提示
opts.message(message);
return false;
}
var img = $("#" + imgId);
//IE下
if($.browser.msie){
//使用滤镜
this.select();
url = document.selection.createRange().text;
//创建一个div设置背景作为图片预览
var newPreview = document.createElement("div");
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
newPreview.style.width = img.width();
newPreview.style.height = img.height();
//使用div标签替换img标签
img.replaceWith(newPreview);
//使用图片
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
//other
}else{
if(this[0].files){
var file = this[0].files[0];
if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
}else if(window.webkitURL != undefined){
url = window.webkitURL.createObjectURL(file);
}
}
img.attr("src",url);
}
//执行回调函数
opts.callBack(true);
return true;
}
});

使用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="js/jqueryExtends.js" ></script>
<title></title>
</head>
<script>
function imgPreview(file){
//调用插件
$(file).imgPreview("img");
}
</script>
<body>
<center>
<div>
<img src="" id = "img" width="150" height="200"/>
</div>
<input type="file" style="width: 150px;" onchange="imgPreview(this)"/>
</center>
</body>
</html>

简单粗暴有木有，本文例子只使用了一个参数，其它参数的使用，大家可自行尝试。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html jquery插件图片预览

相关文章推荐

新的分享

章节导航