版权声明：本文为博主原创文章，未经博主允许不得转载。
根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。
第一种方法：
//图片显示插件
(function ($) {
$.imageFileVisible = 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);
$().on("change", function () {
var file = [0];
var imageType = /image.*/;
if ((imageType)) {
var reader = new FileReader();
= function () {
var img = new Image();
= ;
$(img).width();
$(img).height();
$().append(img);
};
(file);
} else {
alert();
}
});
};
})(jQuery);
$(document).ready(function () {
//图片显示插件
$.imageFileVisible({ wrapSelector: "#image-wrap1",
fileSelector: "#file1",
width: 300,
height: 300
});
$.imageFileVisible({ wrapSelector: "#image-wrap2",
fileSelector: "#file2",
width: 300,
height: 300
});
});
选择图1： |
选择图2： |
||
|---|---|---|---|
第二种方法：
var image = '';
function selectImage(file) {
if (! || ![0]) {
return;
}
var reader = new FileReader();
= function (evt) {
('image').src = ;
image = ;
}
([0]);
}