Home > Article > Web Front-end > Preview jquery images according to the specified ratio when uploading (with code)
Preview jquery images according to the specified ratio when uploading (with code)
- php中世界最好的语言Original
- 2018-04-26 17:56:131807browse
This time I will bring you a jquery image preview at a specified ratio when uploading (with code). What are the precautions on how to preview a jquery image at a specified ratio when uploading. The following is a practical case, let’s take a look. one time.
//**********************图片上传预览插件*************************
(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 < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;
if (rate <= 1) {
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgp.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
imgp.width(img_width * rate);
imgp.height(img_height * rate);
} else {
imgp.width(img_width);
imgp.height(img_height);
}
var left = (opts.width - imgp.width()) * 0.5;
var top = (opts.height - imgp.height()) * 0.5;
imgp.css({ "margin-left": left, "margin-top": top });
imgp.show();
}
}
_this.change(function() {
if (this.value) {
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");
this.value = "";
return false;
}
imgp.hide();
if ($.browser.msie) {
if ($.browser.version == "6.0") {
var img = $("<img />");
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 = $("<img />");
imgp.replaceWith(img);
imgp = img;
imgp.attr('src', this.files.item(0).getAsDataURL());
imgp.css({ "vertical-align": "middle" });
setTimeout("autoScaling()", 100);
}
}
});
}
});
})(jQuery);Page part:
<!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">
<head runat="server">
<title></title>
<meta content="" name="Keywords" />
<meta content="" name="Description" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<script type="text/
javascript
" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/uploadPreview/jquery.uploadPreview.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//建议在#imgp的父元素上加个overflow:hidden;的css样式
$("input").uploadPreview({ width: 200, height: 200, imgp: "#imgp", imgType: ["bmp", "gif", "png", "jpg"] });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="file" />
<br />
<p style="width: 200px; height: 200px; overflow: hidden; border: 1px solid red;">
<p id="imgp">
</p>
</p>
</form>
</body>
</html>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
jquery makes thumbnail associated image switching function
##Jquery digital scrolling switching plug-in implementation method
The above is the detailed content of Preview jquery images according to the specified ratio when uploading (with code). For more information, please follow other related articles on the PHP Chinese website!