图片上传即时显示缩略图的方法(转)
jquery实现上传即显示缩略图
目前，浏览器兼容情况： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
thumbnail : function(displayExp) {
return this.each(function(){
var display = $(displayExp);
if ($.browser.msie) {
display.css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) progid:DXImageTransform.Microsoft.BasicImage()");
}
$(this).change(function(){
if (this.value) {
if ($.browser.msie) {
display.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value;
} else if ($.browser.mozilla) {
if (display.attr("tagName") != "IMG") {
var img = $("<img />");
img.css({height: display.css("height"), width: display.css("width")});
display.replaceWith(img);
display = img;
}
display.attr('src', this.files.item(0).getAsDataURL());
} else {
$(this).unbind("change", arguments.call);
}
}
}).change();
});
}
});
})(jQuery);
$(function(){
$("#f").thumbnail("#display");
});
</script>
</head>
<body>
<form>
<input type="file" id="f" />
</form>
<div id="display" style="height:200px;width:200px;"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
thumbnail : function(displayExp) {
return this.each(function(){
var display = $(displayExp);
if ($.browser.msie) {
display.css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) progid:DXImageTransform.Microsoft.BasicImage()");
}
$(this).change(function(){
if (this.value) {
if ($.browser.msie) {
display.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value;
} else if ($.browser.mozilla) {
if (display.attr("tagName") != "IMG") {
var img = $("<img />");
img.css({height: display.css("height"), width: display.css("width")});
display.replaceWith(img);
display = img;
}
display.attr('src', this.files.item(0).getAsDataURL());
} else {
$(this).unbind("change", arguments.call);
}
}
}).change();
});
}
});
})(jQuery);
$(function(){
$("#f").thumbnail("#display");
});
</script>
</head>
<body>
<form>
<input type="file" id="f" />
</form>
<div id="display" style="height:200px;width:200px;"></div>
</body>
</html>
ie6: 支持
ie7: 支持
ie8: 未测试
ff2: 未测试
ff3: 支持
webkit系列: 不支持
原:http://willko.javaeye.com/blog/381684
demo:http://www.willko.cn/lab/test.html
