标签：html 浏览器 jquery
//说明：图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图
//参数设置：
//width 存放图片固定大小容器的宽
//height 存放图片固定大小容器的高
//imgShow 页面DIV的JQuery的id
//maxSize 图片大小最大限制(K)
//imgType 数组后缀名
//**********************图片上传预览插件*************************
(function($) {
jQuery.fn.extend({
uploadPreview: function(opts) {
opts = jQuery.extend({
width: 120,
height: 120,
intImg: "1",
imgAll: "#imgAll",
imgShow: "#imgShow",
maxSize:30000,
imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function() { return false; }
}, opts || {});
//var _self = this;
var _this = $(this);
var imgAll = $(opts.imgAll);
var imgShow = $(opts.imgShow);
imgShow.width(opts.width);
var intImg = opts.intImg;
// imgShow.height(opts.height);
var version = parseInt($.browser.version,10);
//弹出层
var propBox = "<div id=‘fade"+intImg+"‘ style=‘display: none;position:relative;top: 0%;left: 0%;width: 100%;height: 100%;"
+"background-color: rgba(0, 0, 0, 0.2);z-index:500;-moz-opacity: 0.8;filter: alpha(opacity=80);‘></div>";
//弹出层img
var propImg = "<div style=‘position: absolute;display: none;margin-top: top;border: 0px;background-color: white;z-index:700"
+"padding: 0 auto;margin: 0 auto;‘ id=‘MyDiv"+intImg+"‘ ><img style=‘position: relative;background:#CEDDED;z-index:800;border: 6px solid;width: "
+"500px;height: auto;‘ id=‘myImg"+intImg+"‘ src=‘‘ ><img id=‘close_img"+intImg+"‘ style=‘position: absolute;background:#CEDDED ;"
+"z-index:1000;right:7px;top:7px; cursor: pointer‘ src=‘/images/ercmp/close.png‘/></img>";
autoScaling = function() {
if (version == 7 || version == 8 || version == 9) imgShow.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
var img_width = imgShow.width();
var img_height = imgShow.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) imgShow.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
imgShow.width(img_width * rate);
imgShow.height(img_height * rate);
} else {
imgShow.width(img_width);
imgShow.height(img_height);
}
var left = (opts.width - imgShow.width()) * 0.5;
var top = (opts.height - imgShow.height()) * 0.5;
imgShow.css({ "margin-left": left, "margin-top": top });
imgShow.show();
}
},
createImg = function(){
/* imgShow.html(‘‘);
var img = $("<img />");
imgShow.replaceWith(img);
imgShow = img; */
if(!$("#img_on_change"+intImg).length>0){
imgShow.before(" <img id=‘img_on_delete"+intImg+"‘ src=‘/images/ercmp/dele.png‘ /> ");
//点击删除图片的css
$("#img_on_delete"+intImg).css({
‘position‘: ‘absolute‘,
‘background‘:‘#CEDDED‘,
‘z-index‘:‘400‘,
‘right‘:‘2px‘,
‘top‘:‘3px‘,
‘cursor‘: ‘pointer‘
});
imgShow.before(" <img id=‘img_on_change"+intImg+"‘ src=‘/images/ercmp/zoom.png‘ /> ");
//点击放大图片的css
$("#img_on_change"+intImg).css({
‘position‘: ‘absolute‘,
‘background‘:‘#CEDDED‘,
‘z-index‘:‘400‘,
‘right‘:‘20px‘,
‘top‘:‘3px‘,
‘cursor‘: ‘pointer‘
});
$(‘body‘).append(propBox+propImg);
}
//图片关闭按钮
$(‘#close_img‘+intImg).unbind("click").click(function(){
$(‘#fade‘+intImg).hide();
$(‘#MyDiv‘+intImg).hide();
});
//图片删除按钮
$(‘#img_on_delete‘+intImg).unbind("click").click(function(){
var id = $(this).attr("id");
var num = id.replace("img_on_delete","");
$("#imgAll"+num).remove();
});
//图片放大按钮绑定事件
$(‘#img_on_change‘+intImg).unbind("click").click(function(){
var windowW = $(window).width();
var windowH = $(window).height();
var windowS = document.documentElement.scrollTop + document.body.scrollTop;
$(‘#fade‘+intImg).show(350,function(){
$(‘#MyDiv‘+intImg).show(0,function(){
var i_width = $("#myImg"+intImg).width();
var i_height = $("#myImg"+intImg).height();
$(‘#MyDiv‘+intImg).css({
‘top‘: windowH/2 + windowS - i_height/2 + ‘px‘,
‘left‘: windowW/2 - i_width/2 + ‘px‘,
})
});
});
});
},
_this.change(function() {
if (this.value) {
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");
this.value = "";
return false;
}
//imgShow.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();
imgShow.attr(‘src‘, image.src);
$("#myImg"+intImg).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;
imgShow.html(‘‘);
imgShow.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });
imgShow.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
$("#myImg"+intImg).html(‘‘);
$("#myImg"+intImg).css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });
$("#myImg"+intImg).get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
try {
imgShow.get(0).filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = img;
$("#myImg"+intImg).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 以下
imgShow.attr(‘src‘, file.getAsDataURL());
$("#myImg"+intImg).attr(‘src‘, file.getAsDataURL());
}catch(e){
//Firefox8.0以上
imgShow.attr(‘src‘, window.URL.createObjectURL(file));
$("#myImg"+intImg).attr(‘src‘, window.URL.createObjectURL(file));
}
imgShow.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) {
imgShow.attr(‘src‘, e.target.result);
$("#myImg"+intImg).attr(‘src‘, e.target.result);
};
reader.readAsDataURL(this.files[0]);
setTimeout("autoScaling()", 100);
}
};
}
}
});
}
});
})(jQuery);
-------------------------------------------------------------------------------------调用方法--------------------------------------------------------------------------------------------
//展示图片
var intImg = 0;
function addImg(){
intImg =intImg+1;
$("#img_td").append(
"<div id=imgAll"+intImg+" style=‘margin-left:6px;margin-top:6px;position:relative;float:left; background:#E4F8FE; width: 120px; height:120px; border: 0px; overflow:hidden; ‘>"
+"<img id=imgShow"+intImg+" src=‘‘ style=‘display: none;position:absolute;top:0px;left:0px; margin:0 auto; padding:0 auto;width:120px;height:120px;z-index:100;‘ /> "
//+"<div id=imgShow"+intImg+" style=‘‘>"
+"<img id=imgShowi"+intImg+" src=‘/images/ercmp/img_add.png‘ style=‘z-index:50;position:absolute;top:0px;left:0px; margin:0 auto; padding:0 auto;width:120px;height:120px;‘>"
//+"</div>"
+"<input type=‘file‘ name=files"+intImg+" id=files"+intImg+" value=‘上传文件‘ size=‘1‘ style=‘opacity:0;filter:alpha(opacity=0); position:absolute; "
+"z-index:200;top:0px;left:0px; margin:0 auto; padding:0 auto;width: 120px;height:120px;cursor: pointer;font-size:1200px;marin-left:120px;‘/>"
+"</div>"
);
$("#files"+intImg).unbind("click").on("click",function(){
var id = $(this).attr("id");
var num = id.replace("files","");
$("#files"+num).uploadPreview({ width: 120, height: 120, imgAll: "#imgAll"+num, imgShow: "#imgShow"+num, intImg: num});
}).unbind("change").change(function(){
var id = $(this).attr("id");
var num = id.replace("files","");
if(intImg==num){
addImg();
}
});
$("#imgAll"+intImg).mouseover(function(){
var id = $(this).attr("id");
var num = id.replace("imgAll","");
$("#imgShowi"+num).attr("src","/images/img_addhov.png");
}).mouseout(function(){
var id = $(this).attr("id");
var num = id.replace("imgAll","");
$("#imgShowi"+num).attr("src","/images/img_add.png");
});
}
---------------------------------------------------------------html------------------------------------------------------------------------------------------
<div id="img_td"></div>
---------------------------------------------------------------------------------------------------------------------------------------------------------------
里面还有三张图片自己找找吧网上很多 close.png zoom.png dele.png
还有两张鼠标移动图片 不能上传附件就直接贴出来吧 （
不知道为什么上传不了图片直接把图片名称说出来吧 "/images/img_addhov.png" "/images/img_add.png"）
html 图片预览上传（支持ie，google，火狐）
标签：html 浏览器 jquery
原文地址：http://blog.csdn.net/kuang_wu/article/details/46008569
