html 图片预览上传（支持ie，google，火狐）

//说明：图片上传预览插件

//上传的时候可以生成固定宽高范围内的等比例缩放图

//参数设置：

//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"）

时间： 2024-08-02 20:35:04

html 图片预览上传（支持ie，google，火狐）的相关文章

PHP仿微信多图片预览上传功能

PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js...生产图片区域,上传按钮#btn可替换自己想要的图片 [html] view plain copy在CODE上查看代码片派生到我的代码片 <ul id="ul_pics" class="ul_pics clearfix"> <li><img src="logo.png" id="btn" class=

图片预览上传

框架:Struts2.Spring.MyBatis 需求简介: [新建页面] 可添加多张图片,只显示一张,添加后显示在页面列表中,可删除,可切换预览. [编辑页面] 功能同上. 页面设计: 预览图 xxxxx1.jpg 删除 xxxxx2.jpg 删除 添加文件 技术点: 1. 本地图片上传后在jsp页面中预览.js 2.服务器读硬盘文件,显示到jsp.java 3.jsp提交包含文件表单不刷新.easyUI -------------------------------------------

PHP仿微信多图片预览上传

本文演示了手机微信端常用的多图片上传及时预览功能,点击上传的图片可立即删除.若是需要制作其他功能的或者修改样式的,请联系群主.比如拖拽.旋转或放大功能. 多图片上传演示地址: http://www.sucaihuo.com/js/830.html

【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进行重新编辑的时候,这些图片怎么办?由于对js不是很熟悉,就没有想去修改这个组件的代码.只有重新寻找合适的组件,于是就找到了百度的WebUploader,下面简要描述一下该组件在MVC中的使用,包括图片的上传和预览,以及在编辑界面对图片的处理办法. 先来一张效果图: (一)图片的上传和预览 (1)下载

jquery.uploadView 实现图片预览上传

图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src=&quo

JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="wxChoi

js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body> <div id="divPrevie

bootstrap图片剪裁预览上传

效果图预览: 用到的图片剪裁插件:http://www.htmleaf.com/jQuery/Image-Effects/201504211716.html 前段ui框架:bootstrap3 java后端框架:spring + mybstis 说明:如果前端ui用的不是bootstrap的框架,则调过第一步,直接将第二步的页面地址作为弹出框的地址即可,然后在做修改 1.首先说一下bootstrap的模态框: 一般的打开模态框要在页面上隐藏一段html代码然后用$("#Id").mod

MUI 单个图片上传预览（拍照+系统相册）：先选择-&gt;预览-&gt;上传提交

1 html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="../css/mui.min.css" rel="stylesheet" /> <script src="../js/mui.min.js"></s