图片上传(blob或base64位)
程序员文章站
2022-04-28 21:27:10
...
图片展示以及上传完整版
样式
html,body{
height:90%;
}
.main{
min-width: 320px;
font: 400 14px/1.5 "\5FAE\8F6F\96C5\9ED1",Helvetica;
background: white;
font-size: 1em;
max-width: 768px;
margin: 0 auto !important;
padding:20px;color:#666;
height:100%;
border:1px solid #666;
}
input[type="file"] {
position: absolute;
/*font-size: 100px;*/
right: 0;
top: 0;
opacity: 0; height: 100%;
width: 100%;
}
.addPhotoes{
border:1px dashed #4196f6;border-radius:3px;
width:220px;height:160px;float:left;position:relative;
}
.addPhotoes::after{
content:"";
display:block;
position:absolute;
width:70%;
height:1px ;
left:15%;top:50%;
background-color:#4196f6;
}
.addPhotoes::before{
content:"";
display:block;
position:absolute;
width:1px;
height:70% ;
left:50%;top:15%;
background-color:#4196f6;
}
.addPhotoes input[type="file"] {
position: absolute;
/*font-size: 100px;*/
right: 0;
top: 0;
opacity: 0; height: 100%;
width: 100%;
}
.lis{
min-width:222px;min-height:162px;float:left;padding:0px;display:flex;margin:0;
flex-wrap: wrap;align-content: flex-start;
}
.lis li{
border:1px dashed #4196f6;padding:20px 0 0 20px;border-radius:3px;flex:1;
display:inline-block;position:relative;width:200px;height:140px;margin-right:10px;
}
.lis li img{
display:block;width:180px;height:120px;margin: auto;
}
.deletePhoto{
position:absolute;text-align: center;
top:10px;border-radius: 50%;width:20px;height:20px;line-height: 20px;
left:10px;color:white;background-color:#3D97ED;
}
.changePhoto{
text-align: center;
float:left;
padding:15px 10px;
background-color: #4196f6;
width:120px;margin-right:20px;
border-radius: 3px;position: relative;
color: white;
}结构
<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>引入jquery.js
<script src="jquery-1.10.2.js"></script>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("修改完毕")
}
})
})ps:需要引入jquery.js
限制最多只能上传5张，这个可以自己改flag的值
上一篇： Linux服务器异常关机，重启启动后weblogic无法启动
下一篇： JAVA8流Stream