//说明:图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置:
//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的更多相关文章

  1. 上传图片预览 支持IE8+,FF,Chrome ,保留原图片比例

    代码及效果:链接

  2. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  4. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  5. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  6. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  7. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  8. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  9. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

随机推荐

  1. (原)10-folder交叉验证

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6069731.html 参考网址: https://github.com/cmusatyalab/ope ...

  2. HDU 4507 有点复杂却不难的数位DP

    首先来说,,这题我wrong了好几次,代码力太弱啊..很多细节没考虑.. 题意:给定两个数 L R,1 <= L <= R <= 10^18 :求L 到 R 间 与 7 无关的数的平 ...

  3. Python学习笔记九-文件读写

    1,读取文件: f=open('目录','读写模式',encoding='gbk,error='egiong') 后三项可以不写但是默认是' r'读模式:open函数打开的文件对象会自动加上read( ...

  4. Java语言中有4种访问修饰符

    转载:http://wuhaidong.iteye.com/blog/851754 Java语言中有4种访问修饰符 在Java语言中有4中访问修饰符:package(默认).private.publi ...

  5. Android 开发中关于layoutinflater

    Inflater英文意思是膨胀,在Android中应该是扩展的意思吧. LayoutInflater的作用类似于 findViewById(),不同点是LayoutInflater是用来找layout ...

  6. 2 _RESETFUL介绍

    2.2 CURL 命令的讲解: 1.就是以命令的方式来执行HTTP 协议的请求的工具 2.可以通过CURL 操作HTTP的GET/POST/PUT/DELETE方法 jrhmpt01:/root# c ...

  7. OpenWRT 编译 error GNU libiconv not in use but included iconv.h is from...

    OpenWRT 编译 error GNU libiconv not in use but included iconv.h is from... 编译的时候碰到一个常见的错误,但是却在一个陌生的地方爆 ...

  8. LCS算法思想

    LCS问题就是求两个字符串最长公共子串的问题.解法就是用一个矩阵来记录两个字符串中所有位置的两个字符之间的匹配情况,若是匹配则为1,否则为0.然后求出对角线最长的1序列,其对应的位置就是最长匹配子串的 ...

  9. Walls and Gates 解答

    Question You are given a m x n 2D grid initialized with these three possible values. -1 - A wall or ...

  10. hdu3095-Eleven puzzle(双向搜索+哈希)

    Partychen invents a new game named “Eleven Puzzle” .Just like the classic game “Eight Puzzle”,but th ...