jQuery实现图片上传预览效果功能完整实例攻略
在网页开发中,图片上传是一个经常用到的功能。为了方便用户预览刚上传的图片,我们可以使用jQuery实现图片上传预览效果。以下是具体实现步骤:
1. HTML结构
首先,我们需要在HTML中添加一个input元素,并设置type为file,以实现用户上传图片的功能。
<input type="file" id="fileInput">
同时,我们需要在HTML中设置一个div元素,用于显示上传的图片。
<div id="imgPreview">
<img id="preview" src="">
</div>
2. jQuery实现
- 给input元素绑定change事件,实现当用户选择了要上传的文件时,上传的图片会自动显示在预览区。
$(document).ready(function() {
$("#fileInput").change(function() {
var objUrl = getObjectURL(this.files[0]); //获取文件路径
if (objUrl) {
$("#preview").attr("src", objUrl); //将图片路径赋值给img元素
}
});
});
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { //URL.createObjectURL()方法只有Chrome和FireFox支持
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
- 当用户上传的文件不是图片时,我们需要用另一张图片替代原本的预览图,以提醒用户上传文件格式不正确。
$(document).ready(function() {
$("#fileInput").change(function() {
var file = this.files[0];
var objUrl = getObjectURL(file);
if (objUrl) {
$("#preview").attr("src", objUrl);
} else { //替换为提示图片
$("#preview").attr("src", "warning.jpg");
}
});
});
3. 完整示例
在这里,我们提供两个示例以展示jQuery实现图片上传预览效果的完整流程。
- 示例一:只能上传图片文件,其他文件上传会提示用户,示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现图片上传预览效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<div id="imgPreview">
<img id="preview" src="">
</div>
<script>
$(document).ready(function() {
$("#fileInput").change(function() {
var file = this.files[0];
if (file.type.indexOf("image") === 0) { //判断是否为图片类型
var objUrl = getObjectURL(file);
if (objUrl) {
$("#preview").attr("src", objUrl);
}
} else { //提示用户上传文件类型不正确
alert("请上传图片文件!");
}
});
});
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</body>
</html>
- 示例二:上传任意类型的文件,但不是图片文件的上传会使用预设的图片替代原本的预览图,示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现图片上传预览效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<div id="imgPreview">
<img id="preview" src="">
</div>
<script>
$(document).ready(function() {
$("#fileInput").change(function() {
var file = this.files[0];
var objUrl = getObjectURL(file);
if (objUrl) {
$("#preview").attr("src", objUrl);
} else { //上传非图片文件时使用预设的图片替代原本的预览图
$("#preview").attr("src", "warning.jpg");
}
});
});
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</body>
</html>
结束语
通过以上两个实例,我们可以看到jQuery实现图片上传预览效果的方法非常简单,只需要运用input元素的change事件和图片的获取、替换等方法即可实现。当然,你也可以根据自己的需求对以上示例进行修改和优化,达到更好的使用效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery实现图片上传预览效果功能完整实例【测试可用】 - Python技术站