Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。
前端我们做需求的时候，应该经常遇到要求上传图片的场景。
分析：blob或base64位形式上传
实现：
html代码：
<body>
<div class="main">
<ul id="lis" class="lis" style="display:none;margin-bottom:0;overflow:hidden;">
</ul>
<span class="addPhotoes" id="addPhotoes">
<!--添加图片-->
<input type="file" name="" id="fileIt" multiple="multiple">
</span>
<button class="changePhoto" id="sureReplaceAll">确定修改</button>
</div>
</body>
js代码：
var msg = "您可以上传png, jpg, 或者gif格式的图片";
//转换成blob
function getObjectURL(file) {
var url = null
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file)
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file)
}
return url;
}
//base64检测上传文件是图片
function validateImg(data) {
var pos = data.indexOf(",") + 1;
for (var e in filter) {
if (data.indexOf(filter[e]) === pos) {
return e;
}
}
return null;
}
let flag = $("#lis li").length;
//获取图片&展示图片
if (flag == 0 || flag < 0) {
$("#lis").hide()
} else {
$("#lis").show()
}
$("#fileIt").change(function () {
// var file = this.files[0];
let fl = this.files.length;
if (flag + fl > 5) {
alert("上传图片达到最大限制,最多上传5张");
return
}
for (var i = 0; i < fl; i++) {
var file = this.files[i];
if (file != undefined) {
var imgBlobSrc = getObjectURL(file);
//blob
if (imgBlobSrc) {
if (!/image\/\w+/.test(file.type)) { alert(msg);}//检测上传文件是图片
else {
flag++
let ss = $("#lis li").length
if (flag != 0) {
$("#lis").append('<li><input type="file" name="" capture="camera"><img class="ps" src="' + imgBlobSrc + '" alt="" ><span class="deletePhoto">x</span></li>')
}
$("#lis").show()
if (flag == 5 || flag > 5) {
$("#addPhotoes").hide()
} else {
$("#addPhotoes").show()
}
}
}
//base64
//if (window.FileReader) {
// var reader = new FileReader();
// reader.readAsDataURL(file);
// //监听文件读取结束后事件
// reader.onloadend = function (e) {
// imgsrc = e.target.result.split(",")[1]
// //e.target.result就是最后的路径地址
// flag++
// let ss = $("#lis li").length
// $("#lis").append('<li><input type="file" name="" capture="camera"><img class="ps" src="' + imgBlobSrc + '" alt="" ><span class="deletePhoto">x</span><p style=""></p></li>')
// };
//}
}
}
});
//删除图片
$("#lis").on("click", ".deletePhoto", function () {
$(this).parent().remove()
flag--
if (flag == 5 || flag > 5) {
$("#addPhotoes").hide()
} else {
$("#addPhotoes").show()
}
if (flag == 0 || flag < 0) {
$("#lis").hide()
} else {
$("#lis").show()
}
})
//确定修改--图片上传
$("#sureReplaceAll").on("click", function () {
var photoArr = []
for (var i = 0; i < $("#lis li").length; i++) {
photoArr[i] = $("#lis li").eq(i).children("img")[0].currentSrc
}
console.log(photoArr)//blob
if (photoArr == "") {
alert("未上传图片")
return
}
//$.ajax({
// url: "...",
// type: 'post',
// data: { photoArr: photoArr },
// dataType: 'json',
// xhr: xhrOnProgress(function (e) {//上传进度
// }),
// success: function (data) {
// alert("修改完毕")
// }
//})
})
//修改单张图片
$("#lis").on('change', "li input", function () {
let Ind = $(this).parent("li").index()
let file = this.files[0];
if (file != undefined) {
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
var imgBlobSrc = getObjectURL(file)
if (!/image\/\w+/.test(file.type)) { alert(msg); }
else {
$("#lis li").eq(Ind).find("img").attr("src", imgBlobSrc)
}
};
}
}
})
$("#lis").on("click", ".deletePhoto", function () { //删除图片
$(this).parent().remove()
flag--
if (flag == 5 || flag > 5) {
$("#addPhotoes").hide()
} else {
$("#addPhotoes").show()
}
if (flag == 0 || flag < 0) {
$("#lis").hide()
} else {
$("#lis").show()
}
})
//确定修改并上传
$("#sureReplaceAll").on("click", function () {
var photoArr = []
for (var i = 0; i < $("#lis li").length; i++) {
photoArr[i] = $("#lis li").eq(i).children("img")[0].currentSrc
}
console.log(photoArr)//blob
if (photoArr == "") {
alert("未上传图片")
return
}
$.ajax({
url: "...",
type: 'post',
data: { photoArr: photoArr },
dataType: 'json',
xhr: xhrOnProgress(function (e) {//上传进度
}),
success: function (data) {
alert("修改完毕")
}
})
})
代码中flag的值是最多上传图片数量，这个可以自己根据需求做出限制。
