图片上传（web前端）
2019-08-08 本文已影响0人
新世纪好青年
图片上传，图片预览，可以删除预览图片，最多上传3张，需引入jquery，demo里用到了阿里巴巴矢量图，所以粘贴我的代码运行之后，需要自己更换小图标,先附上效果图
13791152-a5b49905073b8e41.png
13791152-da8bc228a6289cd1.png
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</head>
<body>
<div class="upload-div" id="uploadImageDiv">
<ul class="upload-ul" id="uploadUL">
<!--默认的点击窗口在添加了图片之后，循环在这个前面insert图片的li-->
<li class="upload-li" id="uploadBtn">
<form class="img-input-form" enctype="multipart/form-data" style="opacity: 0;">
<input type="file" accept="image/*" capture="camera" multiple onchange="uploadSingleFile(this)" id="upload">
</form>
<div class="item">
<span class="iconfont icon-jiahao item_span"></span>
<span class="item_span">上传</span>
</div>
</li>
</ul>
</div>
</body>
</html>
JS
window.yValidate = {};
yValidate.checkEmpty = function(obj) {
return (obj == null ||
obj == undefined ||
obj == "");
};
yValidate.checkNotEmpty = function(obj) {
return !yValidate.checkEmpty(obj);
};
var uploadImgIndex = 0;
var imgArr = [];
var fileName = [];
function uploadSingleFile(imgFile) {
var allFile = imgFile.files;
var totalLen = allFile.length;
if (yValidate.checkNotEmpty(imgArr) && imgArr.length > 0) {
totalLen = totalLen + imgArr.length;
}
if (totalLen > 3) {
alert("只能上传3张图片");
return;
}
for (var i = 0; i < allFile.length; i++) {
var file = allFile[i];
if (yValidate.checkNotEmpty(imgArr) && imgArr.length > 0) {
if (imgArr.length < 3) {
imgArr.push(file);
var simpleFileName = $("#upload").val()
var strFileName = simpleFileName.substring(simpleFileName.lastIndexOf("\\")+1);
fileName.push(strFileName);
}
} else {
imgArr.push(file);
var simpleFileName = $("#upload").val()
var strFileName = simpleFileName.substring(simpleFileName.lastIndexOf("\\")+1);
fileName.push(strFileName);
}
//添加一层过滤
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (!rFilter.test(file.type)) {
alert("文件格式必须为图片");
return;
}
var reader = new FileReader();
reader.readAsDataURL(file); //用文件加载器加载文件
//文件加载完成
reader.onload = function(e) {
//计算最后一个窗口right边距，当时处于第3个的时候，right=0
if((allFile.length + 1)%3 == 0){
document.getElementById("uploadBtn").style.marginRight = "0px";
}
//以下就是将所有上传的图片回显到页面上，如果需要用canvas进行剪裁再回显以下代码就放入到canvas中
var li = document.createElement('li');
li.id = "upload_"+uploadImgIndex;
document.getElementById("uploadBtn").style.display = "";
uploadImgIndex++;
li.className = "upload-li";
li.innerHTML = '<div class="item image">'+
'<img class="upload-image" src="'+e.target.result+'"/>'+
'<span class="delete-image iconfont icon-shanchu"></span>'+
'</div>';
document.getElementById("uploadUL").insertBefore(li, document.getElementById("uploadBtn"));
var uploadArr = document.getElementById("uploadUL").querySelectorAll("li");
var len = uploadArr.length ;
if(len > 3){
document.getElementById("uploadBtn").style.display = "none";
}
};
reader.onloadend = function(e) {
$(".delete-image").off('click');
$(".delete-image").on('click',function(){
var li = $(this).parent().parent()[0];
var index = $(".upload-ul .upload-li").index(li);
var liId = li.id;
$("#"+liId).remove();
imgArr.splice(index,1);
document.getElementById("uploadBtn").style.display = "";
});
}
var formData = new FormData();
formData.append("upFile", file);
formData.append("fileName", simpleFileName.substring(simpleFileName.lastIndexOf("\\")+1));
//具体情况根据前后台协议而定
//从后台请求数据，返回服务器端的一个临时文件名，最后点击上传时，传给后台这个临时文件名
// $.ajax({
// url: url,
// data: formData,
// type: 'POST',
// cache: false,
// processData: false,
// contentType: false
// }).done(function(res) {
// //把临时文件名存起来
// var uploadUL=$("#uploadUL").attr("value");
// if(uploadUL==undefined){
// $("#uploadUL").attr("value",res);
// }else{
// $("#uploadUL").attr("value",uploadUL+","+res);
// }
// }).fail(function(res) {});
}
}
CSS
.upload-ul {
padding: 50px;
}
.item {
width: 150px;
height: 150px;
background: white;
text-align: center;
border: 1px solid rgb(169, 169, 169);
}
.item_span {
display: inline-block;
line-height: 150px;
}
.upload-div .upload-ul, .show-div .show-image-ul {
letter-spacing: -0.5em;
}
.upload-div .upload-ul .upload-li, .show-div .show-image-ul .show-image-li
{
letter-spacing: normal;
display: inline-block;
width: 150px;
height: 150px;
background: white;
text-align: center;
margin-right: 30px;
float: left;
position: relative;
}
.show-div .show-image-ul .show-image-li img {
height: 100%;
width: 100%;
}
.upload-div .upload-ul .upload-li:nth-child(4n), .show-div .show-image-ul .show-image-li:nth-child(4n)
{
margin-right: 0;
}
.upload-div .upload-ul .upload-li .item.image {
font-size: 0;
}
.upload-div .upload-ul .upload-li .item .delete-image {
position: absolute;
height: 16px;
top: -8px;
left: -8px;
background: white;
}
.upload-div .upload-ul .upload-li .item .upload-image {
height: 100%;
width: 100%;
vertical-align: initial;
}
.img-input-form {
position: absolute;
width: 150px;
height: 150px;
z-index: 999;
}
.img-input-form input {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
写在最后，土豪随意
csdn下载地址
