Dieses Mal bringe ich Ihnen beim Hochladen eine Vorschau eines JQuery-Bildes in einem bestimmten Verhältnis (mit Code). Praktischer Fall, schauen wir uns das einmal an. //**********************图片上传预览插件*************************
(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);Nach dem Login kopieren
<!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>Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
jquery ermöglicht die Funktion zum Umschalten von Miniaturansichten
Implementierungsmethode für das Digital Scrolling Switching-Plug-in von Jquery
Das obige ist der detaillierte Inhalt vonVorschau von JQuery-Bildern entsprechend dem angegebenen Verhältnis beim Hochladen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
