js读取本地图片并显示
抄自
http://blog.csdn.net/qiulei_21/article/details/52785191
第一种方法比较好
版权声明：本文为博主原创文章，未经博主允许不得转载。
根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。
第一种方法：
<script type="text/JavaScript">
//图片显示插件
(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>
<div id="ImportHead">
<table border="0" class="frm" style="height: 35px; width: auto; padding-left: 5px;
padding-top: 1px;">
<tr style="width: 300px; height: 400px;">
<th>
选择图1：
</th>
<td>
<input type="file" id="file1">
<div id="image-wrap1" style="width: 300px; height: 300px; border: solid 1px lightGray">
</div>
</td>
<th>
选择图2：
</th>
<td style="width: 300px;">
<input type="file" id="file2">
<div id="image-wrap2" style="width: 300px; height: 300px; border: solid 1px lightGray">
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input type="submit" id="btnUpload" class="btnSearch" value="上传" />
</td>
</tr>
</table>
</div>
第二种方法：
<html>
<body>
<img id="image"src=""/>
<br/>
<input type="file"onchange="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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人