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

最新推荐文章于 2024-05-23 16:05:36 发布

柒小柒七

最新推荐文章于 2024-05-23 16:05:36 发布

阅读量946

点赞数

分类专栏： JavaScript jquery插件文章标签： premage.js 预览上传图片

本文链接：https://blog.csdn.net/u013361445/article/details/49126119

版权

JavaScript 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

jquery插件

6 篇文章 0 订阅

订阅专栏

实时预览上传图片所用插件是 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 >标签显示

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.