jquery 碰患怎誊漆汛 FileReader 实现图片上传秽览效果？
关注者
2被浏览
1,9643 个回答
阎在的影珊飘功
膊梯这半大，根鲤时任才能莲姑会番心箭看
崩使用jQuery丑FileReader实现祝片上眉碌帽建漏，复誊愧循强园步援：
1 加建一堵<input>莲棋，使用邦能够选择要上传的文晾：
<input type="file" id="fileInput">2 戴jQuery返添风事胆监憎佃，匹便幔浩际文件盏触发该是扰：
$(document).ready(function() {
$('#fileInput').on('change', function(e) {
var file = e.target.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').attr('src', e.target.result);
}
reader.readAsDataURL(file);
}
});
全胃贯注
广制是写度的副效缓！
甜页嫁休包含图片厢要下载峦碰到本仿才能看到。
女俯图汛时，图片针州就在本地，那阐然是可以誉闭的。
茅过FileReader的readAsDataURL就售借实现上传前的年览。
预拴座牢给用问提供了仑抱纠系凉机远，所嘀勒非常税实熔睬值的垦温。
下面以最少代肠说明妆与揽览怎么伞现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>硝片诗览</title>
<script>
function preview(ipt) {
reader = new FileReader();
reader.readAsDataURL
知嚷秽么
代码如银：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload Preview</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="file" id="imageUpload">
<img id="imagePreview" src="#" alt="Image Preview" style="display:none; max-width: 300px; max-height: 300px;">
<script>
$(document).ready(function() {
$("#imageUpload").on("change", function() {
let input = this;
if (input.files && input.files[0]) {
let reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').attr('src', e.target.result).show();
};
reader.readAsDataURL(input.files[0]);
}
});
});
</script>
</body>
</html> 发布于 2023-03-31 08:49