premage.js 实现预览本地上传图片

实时预览上传图片所用插件是 premage.js

参考网址: http://harryjoy.github.io/premage/


大致描述一下操作方式,选择图片上传后,premage.js会生成一个<img id='img-live-preview-id' >的标签,标签的地址是本地文件地址,具体如何生成不清楚,源码目前没有能力解析。


下面是具体过程:

1.所需资源

jquery.js   

premage.js  

        premage.css可选 --premage.js里面生成一些标签有用到该CSS文件


2.jsp 页面调用过程

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Img Live</title>

<link href="jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4.custom.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="premage.js"></script>
<script>
$(document).ready(function() {
	var b = $("#imglive").premage();
});
</script>
</head>
<body>
<input type="file" name="imglive" id="imglive" />

</body>
</html>

3.图片上传新增<img >标签显示


premage.js 实现预览本地上传图片_第1张图片

4.一些说明

以下是生成<img>标签的源代码,如果有需求可以进行修改

		this.draw = function () {
			this.previewImage = $("<img />").addClass('preview-image').attr('src', this.options.default_image).attr('id', 'img-live-preview-id');
			this.setOptions();
		};


*学习中,如有错误之处请指点,3Q.

你可能感兴趣的:(premage.js,预览上传图片)