java 显示本地图片_显示本地图片

Insert title here

$(document).ready(function(){

//图片显示插件

$.p_w_picpathFileVisible({wrapSelector: "#p_w_picpath-wrap",

fileSelector: "#file"

//,width: 100,height: 50

});

});

---------------------------------------------------

p_w_picpath-file-visible.js文件内容如下：

(function($) {

$.p_w_picpathFileVisible = function(options) {

// 默认选项

var defaults = {

//包裹图片的元素

wrapSelector: null,

//元素

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);