1. 概述
1.1 说明
在一些前后端不分离的项目中，经常有一些需要把文件或者图片上传的功能，故记录此代码以便后期使用。
1.2 要求
1.上传，10M以内，限bmp,jpg,png,jpeg等图片格式。提示语：限上传10M以内bmp,jpg,png，jpeg等格式的图片。
2.点击上传按钮上传图片，图片在按钮下方展示；按钮名称更改为重新上传。
3.点击表单确定按钮时，才把表单信息与上传图片信息一同上传至服务器。
1.3 展示
未上传展示：
上传展示：
2. 代码
- 引用jQuery
- 上传后如果不符合要求，则清除上传内容信息(直接.val('')赋值不起作用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上传示例</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.imageWrapper {
display: flex;
flex-direction: column;
}
.imageWrapper .fontTip {
color: #ccc;
line-height: 24px;
}
.imageWrapper .btnUpload {
height: 33px;
min-width: 24px;
padding: 0 20px;
border: 1px solid #0064b6;
border-radius: 3px;
background: #0071ce;
color: #fff;
font-size: 14px;
line-height: 33px;
text-align: center;
display: inline-block;
cursor: pointer;
}
.imageShow {
margin-top: 16px;
width: 76px;
height: 84px;
border: 1px solid rgba(151, 151, 151, 1);
}
.imageShow>img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="imageWrapper">
<div>
<button id="uploadButton" type="button" class="btnUpload"></button>
<input id="imagePic" name="imagePic" type="file"
accept=".bmp,.jpg,.png,.jpeg,image/bmp,image/jpg,image/png,image/jpeg" style="display:none" />
</div>
<div class="fontTip">
限上传不超过10M的bmp,jpg,png,jpeg格式的图片
</div>
<div class="imageShow">
<img id="uploadImageShow" src="" />
</div>
</div>
</body>
<script type="text/javascript">
var btnUploadText = '上传';
$(document).ready(function () {
$("#uploadButton").text(btnUploadText)
$(".imageShow").hide()
$('#uploadButton').click(function () {
$('#imagePic').click();
});
$("#imagePic").on("change", function (e) {
var file = e.target.files[0]; //获取图片资源
var fileTypes = ["bmp", "jpg", "png", "jpeg"];
var bTypeMatch = false
for (var i = 0; i < fileTypes.length; i++) {
var start = file.name.lastIndexOf(".");
var fileType = file.name.substring(start + 1);
if (fileType.toLowerCase() == fileTypes[i]) {
bTypeMatch = true;
break;
}
}
if (bTypeMatch) {
if (file.size <= 1024 * 1024 * 10) {
var reader = new FileReader();
reader.readAsDataURL(file); // 读取文件
// 渲染文件
reader.onload = function (arg) {
$(".imageShow").show()
$("#uploadImageShow").attr("src", arg.target.result)
btnUploadText = '重新上传'
$("#uploadButton").text(btnUploadText)
}
} else {
alert('仅支持不超过10M的图片');
emptyImageUpload("#imagePic")
$("#uploadImageShow").attr("src", "")
$(".imageShow").hide()
btnUploadText = '上传'
$("#uploadButton").text(btnUploadText)
return false;
}
} else {
alert('仅限bmp，jpg，png，jpeg图片格式');
emptyImageUpload("#imagePic")
$("#uploadImageShow").attr("src", "")
$(".imageShow").hide()
btnUploadText = '上传'
$("#uploadButton").text(btnUploadText)
return false;
}
});
})
//清空上传图片信息
function emptyImageUpload(selector) {
var fi;
var sourceParent;
if (selector) {
fi = $(selector);
sourceParent = fi.parent();
} else {
return;
}
$("<form id='tempImgForm'></form>").appendTo(document.body);
var tempImgForm = $("#tempImgForm");
tempImgForm.append(fi);
tempImgForm.get(0).reset();
sourceParent.append(fi);
tempImgForm.remove();
}
</script>
</html>