js读取本地图片并显示

最新推荐文章于 2023-07-28 09:30:14 发布

TheKingLei

最新推荐文章于 2023-07-28 09:30:14 发布

阅读量3.2k

点赞数

分类专栏： H5 文章标签： H5

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将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);
$(document).ready(function () {
//图片显示插件
$.imageFileVisible({ wrapSelector: "#image-wrap1",
fileSelector: "#file1",
width: 300,
height: 300
});
$.imageFileVisible({ wrapSelector: "#image-wrap2",
fileSelector: "#file2",
width: 300,
height: 300
});
});

</script>

第二种方法：

<html>
<body>
<img id="image"src=""/>
<br/>
<input type="file"οnchange="selectImage(this);"/>
<br/>
<script>
var image = '';
function selectImage(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
</script>
</body>

</html>

转载自：https://blog.csdn.net/qiulei_21/article/details/52785191

TheKingLei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js读取本地图片并显示

根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。第一种方法：&lt;script type="text/javascript"&gt;//图片显示插件 (function ($) { $....
复制链接

扫一扫