js小学生图区_js读取本地图片并显示

版权声明：本文为博主原创文章，未经博主允许不得转载。

根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。

第一种方法：

//图片显示插件

(function($) {

$.imageFileVisible= function(options) {//默认选项

vardefaults={//包裹图片的元素

wrapSelector:null,//元素

fileSelector:null,

width:'100%',

height:'auto',

errorMessage:"不是图片"};//Extend our default options with those provided.

varopts=$.extend(defaults, options);

$(opts.fileSelector).on("change",function() {varfile= this.files[0];varimageType= /image.*/;if(file.type.match(imageType)) {varreader= newFileReader();

reader.οnlοad= function() {varimg= newImage();

img.src=reader.result;

$(img).width(opts.width);

$(img).height(opts.height);

$(opts.wrapSelector).append(img);

};

reader.readAsDataURL(file);

}else{

alert(opts.errorMessage);

}

});

};

})(jQuery);

$(document).ready(function() {//图片显示插件

$.imageFileVisible({ wrapSelector:"#image-wrap1",

fileSelector:"#file1",

width:300,

height:300});

$.imageFileVisible({ wrapSelector:"#image-wrap2",

fileSelector:"#file2",

width:300,

height:300});

});

padding-top: 1px;">

选择图1：选择图2：