jquery上传图片---本地浏览图片
//说明：图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图
//参数设置：
//width 存放图片固定大小容器的宽
//height 存放图片固定大小容器的高
//imgDiv 页面DIV的JQuery的id
//maxSize 图片大小最大限制(K)
//imgType 数组后缀名
//**********************图片上传预览插件*************************
(function ($) {
jQuery.fn.extend({
uploadPreview: function (opts) {
opts = jQuery.extend({
width: 0,
height: 0,
imgDiv: null,
imgBox: null,
maxSize: 300,
noimg: '',
imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function () { return false; }
}, opts || {});
var _this = $(this);
var imgDiv = opts.imgDiv;
var imgbox = opts.imgBox;
//var image = new Image();
//image.onload = function () {
// var thisw = this.width, thish = this.height, left, top;
// var rate = (opts.width / thisw < opts.height / thish) ? opts.width / thisw : opts.height / thish;
// if (rate <= 1) {
// imgDiv.width(thisw * rate);
// imgDiv.height(thish * rate);
// } else {
// imgDiv.width(thisw);
// imgDiv.height(thish);
// rate = 1;
// }
// left = (opts.width - thisw * rate) * 0.5;
// top = (opts.height - thish * rate) * 0.5;
// imgDiv.css({ "margin-left": left, "margin-top": top });
// setTimeout(function () {
// imgDiv.show();
// }, 200);
// image = null;
//}
//image.onerror = function () {
// this.src = noimg;
// imgDiv.attr('src', noimg);
// this.onerror = null;
//}
//image.src = imgDiv.attr('src');
var version = 7;
var filters = imgbox[0].filters ? true : false;//ie10内核filters是舍弃了的
var v = { //判断是否是ie
getie: function () {
if (window.attachEvent) {
return true;
}
else {
return false;
}
},
//是否是ie678
getoldie: function () {
if (this.getie()) {
if (window.addEventListener) {
return false;
}
else {
return true;
}
}
else {
return false;
}
},
ie9: function () {
if (navigator.userAgent.indexOf('MSIE 9.0') > 0) {
return true;
}
}
}
version = (v.getoldie || v.ie9) ? 9 : 10;
var fit = (version <= 9 && filters) || (version >= 10 && filters);
var autoScaling = function () {
if (fit) imgbox.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
var box_width = imgbox.width();
var box_height = imgbox.height();
var img_width = imgDiv.width();
var img_height = imgDiv.height();
if (fit) {
img_width = box_width;
img_height = box_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) {
img_width = img_width * rate;
img_height = img_height * rate;
imgbox.width(img_width);
imgbox.height(img_height);
if (fit) {
imgbox.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
}
else {
imgDiv.width(img_width);
imgDiv.height(img_height);
}
} else {
imgDiv.width(img_width);
imgDiv.height(img_height);
}
var left = (opts.width - imgbox.width()) * 0.5;
var top = (opts.height - imgbox.height()) * 0.5;
imgbox.css({ "margin-left": left, "margin-top": top });
setTimeout(function () {
imgDiv.show();
if (fit) {
imgbox.show();
}
}, 100);
}
else {
imgbox.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
imgbox.width(opts.width);
imgbox.height(opts.height);
}
};
var createImg = function () {
imgDiv.html('');
var img = $("<img />");
imgDiv.replaceWith(img);
imgDiv = img;
};
_this.change(function () {
imgDiv.hide();
imgDiv.css({ 'width': '', 'height': '' });
imgbox.css({ 'width': '', 'height': '', 'padding': '' });
if (this.value) {
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");
this.value = "";
return false;
}
//ie7\8\9
var i = this;
if (fit) {
try {
this.select();
var imgSrc = document.selection.createRange().text;
imgbox.html('');
imgbox.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" });
imgbox[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
imgbox[0].filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
imgbox.hide();
setTimeout(function () {
autoScaling();
}, 100);
} catch (e) {
alert("无效的图片文件！");
return;
}
}
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;
}
//支持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(function () {
autoScaling();
}, 100);
}
//火狐非捆绑软件 版本都30几点几了，还会有7.??
//createImg();
//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
//try {
// //Firefox7.0 以下
// imgDiv.attr('src', file.getAsDataURL());
//} catch (e) {
// //Firefox8.0以上
// imgDiv.attr('src', window.URL.createObjectURL(file));
//}
//setTimeout(function () {
// autoScaling();
//}, 100);
} catch (e) {
alert('系统错误，请重试！');
};
}
}
});
}
});
})(jQuery);
调用：
<div class="file-box">
<p>图片上传</p>
<div class="file-info">
<div class="show-img" id="imgbox2">
<img src="/images/ico-upfileimg.png" id="img2" />
</div>
</div>
<div class="file-input">点击上专<input type="file" id="file2" name="CFileUp" /></div>
</div>
说明：由于ie早期是用滤镜实现所需要一个div层如上面的
<div class="show-img" id="imgbox2">
$(function () {
$("#file1").uploadPreview({
width: 220,
height: 150,
imgDiv: $('#img1'),
imgBox: $('#imgbox1'),
noimg: '/Images/noneimg.jpg',
callback: function () { }
});
});
浙公网安备 33010602011771号