jquery 图片上传前预览,支持ie6+、firefox、chrome

项目需要图片上传前预览,网上找了他人写的一个jquery插件,因为作者写的时间较早,浏览器的更新换代很快,我改改了,增强浏览器版本兼容性,支持ie6+、firefox、chrome。

插件代码:
//说明:图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图

//参数设置:
//width 存放图片固定大小容器的宽
//height 存放图片固定大小容器的高
//imgDiv 页面DIV的JQuery的id
//maxSize 图片大小最大限制(K)
//imgType 数组后缀名
//**********************图片上传预览插件*************************
(function($) {
jQuery.fn.extend({
uploadPreview: function(opts) {
opts = jQuery.extend({
width: 0,
height: 0,
imgDiv: "#imgDiv",
maxSize:300,
imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function() { return false; }
}, opts || {});
//var _self = this;
var _this = $(this);
var imgDiv = $(opts.imgDiv);
imgDiv.width(opts.width);
imgDiv.height(opts.height);

var version = parseInt($.browser.version,10);

autoScaling = function() {

if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
var img_width = imgDiv.width();
var img_height = imgDiv.height();
if (img_width > 0 && img_height > 0) {
var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;
if (rate <= 1) {
if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
imgDiv.width(img_width * rate);
imgDiv.height(img_height * rate);
} else {
imgDiv.width(img_width);
imgDiv.height(img_height);
}
var left = (opts.width - imgDiv.width()) * 0.5;
var top = (opts.height - imgDiv.height()) * 0.5;
imgDiv.css({ "margin-left": left, "margin-top": top });
imgDiv.show();
}
},

createImg = function(){
imgDiv.html('');

var img = $("<img />");
imgDiv.replaceWith(img);
imgDiv = img;
},

_this.change(function() {

if (this.value) {
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");
this.value = "";
return false;
}
imgDiv.hide();
if ($.browser.msie && version < 10) {

if (version == 6) {

var image = new Image();
image.onload = function(){
if( (image.fileSize/1024) > opts.maxSize) {
alert('图片大小不能超过'+opts.maxSize+'K');
return false;
}
}
image.src = 'file:///' + this.value;

createImg();
imgDiv.attr('src', image.src);
autoScaling();
} else {

this.select();
var img = document.selection.createRange().text;
var image = new Image();
image.onload = function(){
if( (image.fileSize/1024) > opts.maxSize) {
alert('图片大小不能超过'+opts.maxSize+'K');
return false;
}
}
image.src = img;

imgDiv.html('');
imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });
imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";

try {
imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;
} catch (e) {
alert("无效的图片文件!");
return;
}

setTimeout("autoScaling()", 100);
}
}
else {
try{
var file = null;
var size = 0;
if(this.files && this.files[0] ){
file = this.files[0];
size = file.size;
}else if(this.files && this.files.item(0)) {
file = this.files.item(0);
size = file.fileSize;
}

if((size/1024) > opts.maxSize){
alert('图片大小不能超过'+opts.maxSize+'K');
return false;
}

createImg();

//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
try{
//Firefox7.0 以下
imgDiv.attr('src', file.getAsDataURL());
}catch(e){
//Firefox8.0以上
imgDiv.attr('src', window.URL.createObjectURL(file));
}

imgDiv.css({ "vertical-align": "middle" });
setTimeout("autoScaling()", 100);
}catch(e){
//支持html5的浏览器,比如高版本的firefox、chrome、ie10
if (this.files && this.files[0]) {
if((this.files[0].size/1024) > opts.maxSize){
alert('图片大小不能超过'+opts.maxSize+'K');
return false;
}

var reader = new FileReader();
reader.onload = function (e) {
imgDiv.attr('src', e.target.result);
};
reader.readAsDataURL(this.files[0]);
setTimeout("autoScaling()", 100);
}
};
}
}
});
}
});
})(jQuery);


插件使用:
<div style="width:90px; height:110px; overflow:hidden; border:1px solid red;">
<div id="imgDiv"> </div>
</div>
<br>
<input type="file" value="上传文件">

<script>
$(document).ready(function() {
$("input").uploadPreview({ width: 90, height: 110, imgDiv: "#imgDiv"});
});
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值