javascript 图片上传预览效果

在现代网页开发中，图片上传功能的需求越来越多，而实现图片上传预览效果则是必不可少的。在过去，实现图片上传预览效果需要使用Flash等技术，但现在随着HTML5和JavaScript技术的发展，我们可以很方便地使用JavaScript实现这一效果。首先，我们需要在HTML中添加一个input标签，以便用户选择要上传的图片。代码如下：

<input type="file" id="uploadInput" accept="image/*" onchange="previewImage()">

其中，type="file"指定该input为选择文件的控件。id="uploadInput"是为了在JavaScript中获取该控件对象。accept="image/*"设置只接收图片文件。onchange="previewImage()"则是指定当用户选择图片后触发的事件为previewImage()函数。接下来，我们编写previewImage()函数实现图片预览效果。函数代码如下：

function previewImage() {
var preview = document.getElementById('previewDiv');
preview.innerHTML = '';
var file = document.getElementById('uploadInput').files[0];
var reader = new FileReader();
reader.onloadend = function () {
var img = document.createElement('img');
img.src = reader.result;
img.style.maxWidth = '100%';
img.style.maxHeight = '100%';
preview.appendChild(img);
}
if (file) {
reader.readAsDataURL(file);
}
}

该函数中，我们首先通过document.getElementById获取预览图片的div元素对象，用于插入预览图片。然后获取input文件控件对象并获取用户所选择的文件。利用FileReader API中的readAsDataURL()方法将用户选择的文件读取成base64编码的字符串，然后创建一个image元素，并将读取到的字符串设置为该元素的src属性，从而实现图片预览效果。最后插入到div元素中。下面，我们再来看一个完整的例子。 HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览效果</title>
</head>
<body>
<input type="file" id="uploadInput" accept="image/*" onchange="previewImage()">
<div id="previewDiv"></div>
<script>
function previewImage() {
var preview = document.getElementById('previewDiv');
preview.innerHTML = '';
var file = document.getElementById('uploadInput').files[0];
var reader = new FileReader();
reader.onloadend = function () {
var img = document.createElement('img');
img.src = reader.result;
img.style.maxWidth = '100%';
img.style.maxHeight = '100%';
preview.appendChild(img);
}
if (file) {
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>

在选择图片后，页面将会显示该图片的预览效果。以上就是使用JavaScript实现图片上传预览效果的方法和实例，在实际开发中，我们还可以通过CSS样式来美化预览效果，并可以结合其他插件实现更丰富的图片上传功能。

查看更多关于javascript 图片上传预览效果的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did252739

更新时间：2023-08-03 阅读：58次