JS图片上传预览插件

概要:

JS图片上传预览插件,浏览器需支持HTML5

| |目录

代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
// 图片在线预览
(function($) {
	jQuery.fn.extend({
		uploadPreview : function(opts) {
			opts = jQuery.extend({
				scalingWidth : 0,
				scalingHeight : 0,
				imgPreview : null,
				imgType : [ "jpeg", "jpg", "bmp", "png" ],
				callback : function() {
					return false;
				}
			}, opts || {});
			var _self = this;
			var _this = $(this);
			var imgPreview = $(opts.imgPreview);
			// 设置样式
			autoScaling = function() {
				var width = imgPreview.width();
				var height = imgPreview.height();
				if (width > opts.scalingWidth) {
					var scalingProperty = width / opts.scalingWidth;
					width = width / scalingProperty;
					height = height / scalingProperty;
				}
				if (height > opts.scalingHeight) {
					var scalingProperty = height / opts.scalingHeight;
					width = width / scalingProperty;
					height = height / scalingProperty;
				}
				imgPreview.css({
					"width" : width,
					"height" : height
				});
				imgPreview.show();
			}
			// file按钮出发事件
			_this.change(function() {
				if (this.value) {
					if (!RegExp(".(" + opts.imgType.join("|") + ")$", "i").test(
							this.value.toLowerCase())) {
						alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");
						this.value = "";
						return false;
					}
					// 判断浏览器是否有FileReader接口
					if (typeof FileReader == 'undefined') {
						alert('请使用支持HTML5的浏览器,如IE10,Chrome,FireFox等.');
						return false;
					} else {
						oFReader = new FileReader();
						oFReader.onload = function(oFREvent) {
							imgPreview.attr('src', oFREvent.target.result);
						};
						var oFile = this.files[0];
						oFReader.readAsDataURL(oFile);
					}
					imgPreview.css({
						"display" : 'none',
						"width" : 'auto',
						"height" : 'auto'
					});
					setTimeout("autoScaling()", 100);
				}
				opts.callback();
			});
		}
	});
})(jQuery);
</script>
</head>
<body>
<input type="file" id="input"/>
<div>
	<img id="img" alt="如需预览,请使用支持Html5的浏览器"/>
</div>
</body>
<script>
$(function(){
	$('#input').uploadPreview({
		scalingWidth : 196,
		scalingHeight : 196,
		imgPreview : "#img",
		imgType : [ "bmp", "gif", "png", "jpg" ],
		callback : function() {
		}
	});
})
</script>
</html>


评论关闭
评论 还能输入200
评论关闭
评论 还能输入200
资料加载中...
已关注 , 取消