jquery图片上传时按指定比例预览（附代码）

这次给大家带来jquery图片上传时按指定比例预览（附代码），jquery图片上传时按指定比例预览的注意事项有哪些，下面就是实战案例，一起来看一下。

//**********************图片上传预览插件************************* (function($) { jQuery.fn.extend({ uploadPreview: function(opts) { opts = jQuery.extend({ width: 0, height: 0, imgp: "#imgp", imgType: ["gif", "jpeg", "jpg", "bmp", "png"], callback: function() { return false; } }, opts || {}); var _self = this; var _this = $(this); var imgp = $(opts.imgp); imgp.width(opts.width); imgp.height(opts.height); autoScaling = function() { if ($.browser.version == "7.0" || $.browser.version == "8.0") imgp.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image"; var img_width = imgp.width(); var img_height = imgp.height(); if (img_width > 0 && img_height > 0) { var rate = (opts.width / img_width "); imgp.replaceWith(img); imgp = img; var image = new Image(); image.src = 'file:///' + this.value; imgp.attr('src', image.src); autoScaling(); } else { imgp.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" }); imgp.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image"; try { imgp.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value; } catch (e) { alert("无效的图片文件！"); return; } setTimeout("autoScaling()", 100); } } else { var img = $(""); imgp.replaceWith(img); imgp = img; imgp.attr('src', this.files.item(0).getAsDataURL()); imgp.css({ "vertical-align": "middle" }); setTimeout("autoScaling()", 100); } } }); } }); })(jQuery);

登录后复制

页面部分:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">          $(document).ready(function() { //建议在#imgp的父元素上加个overflow:hidden;的css样式 $("input").uploadPreview({ width: 200, height: 200, imgp: "#imgp", imgType: ["bmp", "gif", "png", "jpg"] }); });    

登录后复制  

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

jquery做出缩略图关联图片切换功能

Jquery数字滚动切换插件实现方法

以上就是jquery图片上传时按指定比例预览（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！