<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--<div class="container">
<img src="1.jpg">
</div>-->
<input type="file" id="file" value=""/>
<div id="p_w_picpath-wrap"></div>
</body>
<script src="dist/jquery-1.11.1.min.js"></script><!-- jQuery is required -->
<link href="dist/cropper.css" rel="stylesheet">
<script src="dist/cropper.js"></script>
<script src="p_w_picpath-file-visible.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//图片显示插件
$.p_w_picpathFileVisible({wrapSelector: "#p_w_picpath-wrap",
fileSelector: "#file"
//,width: 100,height: 50
});
});
</script>
</html>
---------------------------------------------------
p_w_picpath-file-visible.js文件内容如下：
(function($) {
$.p_w_picpathFileVisible = function(options) {
// 默认选项
var defaults = {
//包裹图片的元素
wrapSelector: null,
//<input type=file />元素
fileSelector: null,
width: '100%',
height: 'auto',
errorMessage: "不是图片"
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
$(opts.fileSelector).on("change",function(){
var file = this.files[0];
var p_w_picpathType = /p_w_picpath.*/;
if (file.type.match(p_w_picpathType)) {
var reader = new FileReader();
reader.onload = function() {
var img = new Image();
img.src = reader.result;
$(img).width(opts.width);
$(img).height(opts.height);
$(opts.wrapSelector).append(img);
};
reader.readAsDataURL(file);
} else {
alert(opts.errorMessage);
}
});
};
})(jQuery);
