Heim > Web-Frontend > js-Tutorial > Hauptteil

Vorschau von JQuery-Bildern entsprechend dem angegebenen Verhältnis beim Hochladen (mit Code)

php中世界最好的语言
Freigeben: 2018-04-26 17:56:13
Original
1854 Leute haben es durchsucht

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 = &#39;file:///&#39; + this.value; 
imgp.attr(&#39;src&#39;, 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(&#39;DXImageTransform.Microsoft.AlphaImageLoader&#39;).src = this.value; 
} catch (e) { 
alert("无效的图片文件!"); 
return; 
} 
setTimeout("autoScaling()", 100); 
} 
} 
else { 
var img = $("<img />"); 
imgp.replaceWith(img); 
imgp = img; 
imgp.attr(&#39;src&#39;, this.files.item(0).getAsDataURL()); 
imgp.css({ "vertical-align": "middle" }); 
setTimeout("autoScaling()", 100); 
} 
} 
}); 
} 
}); 
})(jQuery);
Seitenteil:

<!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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!