Aperçu de l'image jquery au rapport spécifié lors du téléchargement (code ci-joint)-js tutoriel-php.cn

Aperçu de l'image jquery au rapport spécifié lors du téléchargement (code ci-joint)

php中世界最好的语言

Libérer： 2018-04-26 17:56:13

original

1864 Les gens l'ont consulté

Cette fois, je vais vous apporter un aperçu de l'image jquery à un rapport spécifié lors du téléchargement (avec code). Quelles sont les précautions pour prévisualiser une image jquery à un rapport spécifié lors du téléchargement. cas pratique, jetons un coup d'oeil une fois.

//**********************图片上传预览插件************************* 
(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);

Copier après la connexion

Partie de la page :

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. php site chinois !

Lecture recommandée :

jquery crée une fonction de commutation d'image associée aux vignettes

Méthode d'implémentation du plug-in de commutation de défilement numérique Jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!