上传图片预览,支持IE6
//说明:图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置:
//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);
HTML代码:
<div style="width: 290px; height: 290px; overflow: hidden; border: 1px solid red;">
<div id="imgDiv"></div>
</div>
<br>
<input type="file" value="上传文件"> <script>
$(document).ready(function () {
$("input").uploadPreview({ width: 290, height: 290, imgDiv: "#imgDiv" });
});
</script>
上传图片预览,支持IE6的更多相关文章
- 上传图片预览 支持IE8+,FF,Chrome ,保留原图片比例
代码及效果:链接
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
随机推荐
- 分布式Session共享(一):tomcat+redis实现session共享
一.前言 本文主要测试redis实现session共享的实现方式,不讨论如何让nginx参与实现负载均衡等. 二.环境配置 本测试在Window下进行 name version port Tomcat ...
- OpenGL ES 2.0 纹理映射
纹理坐标用符点数表示,范围一般从0.0到1.0,在纹理坐标系中.纹理坐标系原点在左上侧,向右为S轴,向下为T轴.两个轴的取值范围都是0.0-1.0. 纹理映射 纹理映射:把一幅纹理图应用到相应的几何图 ...
- hdu2588 gcd 欧拉函数
GCD Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- CODEVS 3279 奶牛的健美操
3279 奶牛健美操 USACO 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description Farmer John为了保持奶牛们的 ...
- java基础知识3
58.线程的基本概念.线程的基本状态以及状态之间的关系线程指在程序执行过程中,能够执行程序代码的一个执行单位,每个程序至少都有一个线程,也就是程序本身.Java中的线程有四种状态分别是:运行.就绪.挂 ...
- C#设置鼠标在控件上面时,改变光标形状
//设置鼠标在控件上面时,改变光标形状 private void pictureBox_macroLogo_MouseHover(object sender, System.EventArgs e) ...
- 关于C函数的参数个数的问题
本文引自:http://c.biancheng.net/cpp/html/1592.html 一个函数的参数的数目没有明确的限制,但是参数过多(例如超过8个)显然是一种不可取的编程风格.参数的数目直接 ...
- 硬盘安装ubuntu
本文记录在能够启动到GRUB2启动菜单的前提下硬盘安装ubuntu的方法. 14.04和16.04测试可用. 假设镜像文件放在GPT第一个分区,文件名为ubuntu.iso. 启动到GRUB2菜单后, ...
- 字典:当索引不好用时 - 零基础入门学习Python025
字典:当索引不好用时 让编程改变世界 Change the world by program 有天你想翻开牛津字典,查找"sadomasochism[ˌseɪdoʊ'mæsəkɪzəm]&q ...
- 异步编程设计模式Demo - AsyncComponentSample
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...