1、引入jquery库<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>,选择正确放jquery文件的路径
2、放一个文件选择的<input type="file" id="file">的标签
3、写一个用于存放图片的容器<div id="image-wrap"></div>
4、引入一个<script src="__PUBLIC__/js/image-file.js"></script>
5.image-file.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];
var imageType = /image.*/;
if (file.type.match(imageType)) {
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);
6、在script标签里显示图片插件
<script>
$(document).ready(function(){
//图片显示插件
$.imageFileVisible({wrapSelector: "#image-wrap",
fileSelector: "#file",
width: 102,
height: 123
});
});
</script>
-------------------------到此图片可以在选择了图片之后显示出来了-----------------------------------------------
7、点击图片可以选择删除图片或者取消删除
在<script></script>中加上
$(function(){
$("#image-wrap").click(function(){
if(confirm("是否要更换图片?")){
$("#image-wrap").empty();
if($("#file").outerHTML){
$("#file").outerHTML=$("#file").outerHTML;
}else{
file.value="";
}
}
})
});
----------------------------------------------------------------------------到此任务完成--------------------------------------------------