JS让本地图片预览不再难-jquery插件

功能介绍

图片上传本地预览插件,Chrome, Firefox, IE

插件参数:

        width : 400, //预览宽度

        height : 400, //预览高度

        previewId : 'picturePreview', //预览DIV ID

        type : ['GIF', 'JPEG', 'JPG', 'BMP', 'PNG'] //图片类型

引用方法

$('#uploadfile1').lockPicturePreview();

$('#uploadfile2').lockPicturePreview({
    width : 300,
    height : 300
});


HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>本地图片上传预览,各个浏览器版本已测</title>
<script src="jquery.min.js"></script>
<script src="lockPicturePreview.js"></script>
</head>

<body>
<input type="file" id="uploadfile1" name="uploadfile" />
<br/>
<input type="file" id="uploadfile2" name="uploadfile" />
<br/><br/>
<div id="picturePreview"></div>
<script>
$(function() {	
	$('#uploadfile1').lockPicturePreview();
	
	$('#uploadfile2').lockPicturePreview({
		width : 300,
		height : 300
	});	 
});
</script>
</body>
</html>



完整代码:

/**
 * 图片本地预览
 * https://github.com/lock-upme/jquery-picture-local-preview
 *
 * @author lock
 */
(function($) {
	$.fn.lockPicturePreview = function(options) {	
		var defaults = {
				width : 400, //预览宽度
				height : 400, //预览高度
				previewId : 'picturePreview', //预览DIV ID
				type : ['GIF', 'JPEG', 'JPG', 'BMP', 'PNG'] //图片类型
		};
		var opts = $.extend(defaults, options);
		var obj= $(this);
		var newPreview = $('#'+opts.previewId);
		
		/**
		 * 检测上传类型
		 */
		var checkPictureType = function(aFiles) {			
			if (aFiles.length === 0) { return false;  }		
			var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
			if (!rFilter.test(aFiles[0].type)) { 
				alert("文件类型错误,请上传类型是" + opts.type.join(",") + "格式图片");
				return false;
			}   
			return true;
		};
		
		var checkPictureTypeIE = function(aFiles) {
			if (!RegExp("\.(" + opts.type.join("|") + ")$", "i").test(aFiles.toUpperCase())) {
                alert("文件类型错误,请上传类型是" + opts.type.join(",") + "格式图片");
                return false
            }
			return true;
		};
		
		 var loadPictureFile = function () {			 
				obj.change( function () { 
					if (window.FileReader) { //chrome,firefox,ie9++
						var aFiles = document.getElementById(obj.attr('id')).files;	
						
						if (!checkPictureType(aFiles)) { return false; }
						
						var oFReader = new window.FileReader();
						oFReader.readAsDataURL(aFiles[0]);
						
						oFReader.onload = function (oFREvent) {							
							newPreview.html('<img src="'+oFREvent.target.result+'" style="max-height:'+opts.height+'; max-width:'+opts.width+'"/>');							
						};						
					}
					if (navigator.appName === 'Microsoft Internet Explorer') { //ie9--
							if (!checkPictureTypeIE(obj.val())) { return false; }
							obj.select().blur();
				            var path = document.selection.createRange().text;
				            newPreview.html('&nbsp;').css({
				            	'filter' : "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")", 
				            	'width' : opts.width + 'px', 
				            	'height' : opts.height + 'px'
				            });						
					}					
				});
			
		 };		 
		 loadPictureFile();	
	};
})(jQuery);


你可能感兴趣的:(JS让本地图片预览不再难-jquery插件)