jQuery 选择图片后无上传预览
本人是新开始写博客的，总结能力不强，直接贴代码吧，很容易懂
引入：项目中经常需要当用户选择照片后立刻把显示出来，本文就是解决这个需求的，插件显示的图片是jQuery画的，此时不涉及上传
1.前端代码
<script src="jquery-1.11.1.min.js"></script>
<script src="image-file-visible.js"></script>
<script>
$(document).ready(function() {
//图片显示插件
$.imageFileVisible({
wrapSelector : "#image-wrap1",
fileSelector : "#file1",
width : 300,
height : 150
});
//图片显示插件
$.imageFileVisible({
wrapSelector : "#image-wrap2",
fileSelector : "#file2",
width : 300,
height : 150
});
});
</script>
</head>
<body>
<form action="FileUpLoad" enctype="multipart/form-data" method="post">
上传文件：<input type="file" name="file1"><div ></div><br />
上传文件： <input type="file" name="file2"><div ></div><br />
<input type="submit" value="提交" />
</form>ps: image-file-visible.js源码（比较简单，根据自己想要的效果可以适当修改）
(function($) {
$.imageFileVisible = 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];
if(typeof(file)){
$(opts.wrapSelector).html("");
}
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function() {
var img = new Image();
img.src = reader.result;//图片的base64位编码
$(img).width(opts.width);
$(img).height(opts.height);
$(opts.wrapSelector).html(img);
};
reader.readAsDataURL(file);
} else {
$(opts.wrapSelector).html("选择的不是图片，将不会上传！");
// alert(opts.errorMessage);
// var file=$(opts.fileSelector);
// file.after(file.clone().val(""));
// file.remove();
}
});
};
})(jQuery);