基于jquery实现的上传图片及图片大小验证、图片预览效果是一个常见的功能,在前端开发中比较常见。下面我来详细讲解一下如何实现。
HTML部分:
<!--表单部分-->
<form>
<input type="file" id="uploadImage" name="uploadImage">
</form>
<!--图片预览-->
<div id="previewImage"></div>
JavaScript部分:
//定义一个回调函数,用于图片上传完成之后执行的操作
function uploadComplete(data) {
//可以在此处解析后台返回的数据,做相应的处理
}
$(function() {
//监听input的change事件
$('#uploadImage').change(function() {
//获取input的file对象
var file = this.files[0];
//判断是否为图片
if(!/image\/\w+/.test(file.type)) {
alert('请选择图片上传!');
return false;
}
//判断图片的大小是否符合要求
if(file.size > 1024*1024) {
alert('图片的大小不得超过1MB!');
return false;
}
//创建FormData对象,通过ajax方式上传图片
var formData = new FormData();
formData.append('uploadImage', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
//上传完成之后,执行回调函数
uploadComplete(data);
}
});
//读取文件并显示预览效果
var reader = new FileReader();
reader.onload = function(e) {
$('#previewImage').html('<img src="'+e.target.result+'">');
};
reader.readAsDataURL(file);
});
});
在上述代码中,我使用了jQuery库来监听了input的change事件。然后,通过使用FileReader
对象,读取了上传的图片,在预览区域中显示了图片的预览效果。
另外,为了确保上传的图片大小不会超过1MB,我使用了file.size
属性获取了图片的大小,并与1MB进行比较。
示例一:上传图片并预览效果
<form>
<input type="file" id="uploadImage" name="uploadImage">
</form>
<div id="previewImage"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function uploadComplete(data) {
//可以在此处解析后台返回的数据,做相应的处理
}
$(function() {
$('#uploadImage').change(function() {
var file = this.files[0];
if(!/image\/\w+/.test(file.type)) {
alert('请选择图片上传!');
return false;
}
if(file.size > 1024*1024) {
alert('图片的大小不得超过1MB!');
return false;
}
var formData = new FormData();
formData.append('uploadImage', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
uploadComplete(data);
}
});
var reader = new FileReader();
reader.onload = function(e) {
$('#previewImage').html('<img src="'+e.target.result+'">');
};
reader.readAsDataURL(file);
});
});
</script>
示例二:上传图片并获取返回的数据
<form>
<input type="file" id="uploadImage" name="uploadImage">
</form>
<div id="previewImage"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function uploadComplete(data) {
var jsonData = JSON.parse(data);
if(jsonData.code === 200) {
alert('上传成功!');
} else {
alert('上传失败!');
}
}
$(function() {
$('#uploadImage').change(function() {
var file = this.files[0];
if(!/image\/\w+/.test(file.type)) {
alert('请选择图片上传!');
return false;
}
if(file.size > 1024*1024) {
alert('图片的大小不得超过1MB!');
return false;
}
var formData = new FormData();
formData.append('uploadImage', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
uploadComplete(data);
}
});
var reader = new FileReader();
reader.onload = function(e) {
$('#previewImage').html('<img src="'+e.target.result+'">');
};
reader.readAsDataURL(file);
});
});
</script>
在示例二中,上传图片之后,使用JSON.parse()
方法将后台返回的json字符串转换成了一个JavaScript对象,然后根据返回的code值进行了相应的处理。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于jquery实现的上传图片及图片大小验证、图片预览效果代码 - Python技术站