<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片上传预览演示-柯乐义</title>
<script src="JS/jQuery.js" type="text/javascript"></script>
</head>
<body>
<div style="500px;margin:0px auto;">
<h2>图片上传预览演示</h2>
<div><img id="ImgPr" width="240" height="240" /></div>
<input type="file" id="up" />
</div>
</body>
</html>
<script type="text/javascript">
/*
*名称:图片上传本地预览插件 v1.1
*作者:周祥
*时间:2013年11月26日
*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari
*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm
*参数说明: 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 () { }});
*/
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"] });
});
jQuery.fn.extend({
uploadPreview: function (opts) {
/*
原生this this和$(this)所指的DOM对象是一致的
原生this没办法$(this)的JQuery的方法
*/
var _self = this,
_this = $(this);
/*
jQuery.extend: 属性迭代
*/
opts = jQuery.extend({
Img: "ImgPr",
Width: 360,
Height: 360,
ImgType: ["Gif", "Jpeg", "jpg", "bmp", "png"],
Callback: function () {
alert(1);
}
}, opts || {});
/*
前端做做图片上传功能时，经常想上传完后可以直接预览，
这时候通常有两种方式，一种就是转成base64编码，然后展示出来。
当然还有另外一种方式，那就是用getObjectURL实现(兼容IE10及以上)
*/
_self.getObjectURL = function (file) {
var url = null;
/*
通过window.URL.createObjectURL（）方法生成的资源URL
bdFile="Blob:http...3a%/asdasd89090786" 这种。
把blob转换File格式显示出来
blob:null/65018f4e-938a-4821-84f3-a9e6aadcaabf
浏览器兼容性适配
*/
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);
}
console.log(url);
return url;
};
_this.change(function () {
if (this.value) {
console.log(this.value);//this.value是所传入的格式 C:fakepathiTunes.exe
/**
* 因为_this 可以调用JQuery里面方法，当调用change方法是，change方法解析之后返回的是DOM对象
* 所以this指的是原生DOM 对象
*/
console.log(_this);//返回的是数组对象 [input#up, selector: "#up", context: document]
console.log(this);//返回的是DOM <input type="file" id="up">
/** 正则表达式 判断图片的格式
* 表达式的意思是 将this.value是所传入的格式先装换成小写，在进行正则表达式验证
* 验证方式 - 正则表达式：传入图片的后缀名是否和opts.ImgType传入的参数一直
* ！取反 .$ 表示后缀是.xxx i 执行对大小写不敏感的匹配。
*/
if (!RegExp(".(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
console.log( opts.ImgType.join("|"));
alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
this.value = "";
return false;
}
/*
$.browser.msie 在jQuery 1.3中不建议使用。浏览器内核标识
*/
if ($.browser.msie) {
/**
* 在下面的例子中，我们故意在 try 块的代码中写了一个错字。
该实例本应该提醒"欢迎光临！"，但弹出的是拼写错误信息。
catch 块会捕捉到 try 块中的错误，并执行代码来处理它：
兼容性配置
*/
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]));
} catch (e) {
console.log(_self);
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'
});
/**
* Microsoft AlphaImageLoader是IE滤镜的一种，其主要作用就是对图片进行透明处理。
* 虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片，
* 但是就IE5-IE6而言还是有一定的意义。
*
*/
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]));
}
opts.Callback();
}
})
}
});
</script>