关键代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>上传插件</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
.shade {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.55);
}
.shade div {
width: 300px;
height: 200px;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background: white;
border-radius: 5px;
text-align: center;
}
.btn input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.img_div{min-height: 100px; min-width: 100px;}
.isImg{width: 120px; height: 120px; position: relative; float: left; margin-left: 10px;}
.removeBtn{position: absolute; top: 0; right: 0; z-index: 11; border: 0px; border-radius: 50px; background: red; width: 22px; height: 22px; color: white;}
.shadeImg{position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 15;
text-align: center;
background: rgba(0, 0, 0, 0.55);}
.showImg{width: 400px; height: 500px; margin-top: 140px;}
</style>
</head>
<body>
<section class="tent_info">
<div class="col-md-12 col-sm-12 col-xl-12 textarea one">
<textarea class="text_send" id="text_send" name="tip"></textarea>
<div class="field field-text-field col-sm-12" data-type="TextField" >
<div class="img_div">
</div>
<a href="javascript:;" class="btn" style="float:left;width:200px;">
<input type="file" name="myFile" id="myFile" multiple="multiple" />点击这里上传文件
</a>
<div class="shadeImg" onclick="javascript:closeShadeImg()">
<div class="">
<img class="showImg" src="">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xl-12 btn btn_send">提交</div>
</div>
</section>
<div class="shade" onclick="javascript:closeShade()">
<div class="">
<span class="text_span">
</span>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script>
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);
}
//console.log(url);
return url;
}
function blobToBase64(file,callback){
var reader = new FileReader();
reader.onload = function(e){
callback(e.target.result);
};
reader.readAsDataURL(file);
}
var filesList=[];
var base64=[];
$(".btn_send").on('click',function(){
var text_send = $("#text_send").val();
console.log("files--",document.getElementById("myFile").files);
$.post('./ajax/add.php',{base64:base64,text_send:text_send},function (data){
},'json')
});
$(function() {
var objUrl;
var img_html;
$("#myFile").change(function(data) {
console.log("data.files:",data.target.files);
console.log("data.files.length:",data.target.files.length);
if(data.target.files.length==0){
$(".text_span").text("没有选择图片");
$(".shade").fadeIn(500);
return false;
}
var EXTILIGAL=true;
for(let index = 0; index < data.target.files.length; index++) {
var filepath = data.target.files[index].name;
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if( ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
EXTILIGAL= false;
}
}
if(!EXTILIGAL){
$(".shade").fadeIn(500);
$(".text_span").text("图片限于bmp,png,gif,jpeg,jpg格式");
return;
}
var SIZEILIGAL=true;
var file_size = 0;
var all_size = 0;
for(j = 0; j < data.target.files.length; j++) {
file_size = data.target.files[j].size;
all_size = all_size + data.target.files[j].size;
var size = all_size / 1024;
if(size > 500) {
SIZEILIGAL=false;
}
}
if(!EXTILIGAL){
$(".shade").fadeIn(500);
$(".text_span").text("上传的图片大小不能超过100k!");
return;
}
for(let index = 0; index < data.target.files.length; index++) {
filesList.push(data.target.files[index]);
}
var img_div = $(".img_div");
$(".img_div").html("");
base64=[];
for(var i = 0; i < filesList.length; i++) {
objUrl = getObjectURL(filesList[i]);
img_html = "<div class='isImg'><img src='" + objUrl + "' style='height: 100%; width: 100%;' /><button class='removeBtn' οnclick='javascript:removeImg("+i+")'>x</button></div>";
img_div.append(img_html);
//异步转换
blobToBase64(filesList[i],function(res){
base64.push(res);
})
}
return true;
});
});
function removeImg(i){
filesList = filesList.filter(function(item,index){
if(index!==i){
return item;
}
});
var img_div = $(".img_div");
$(".img_div").html("");
base64=[];
for(var index = 0; index < filesList.length; index++) {
var objUrl = getObjectURL(filesList[index]);
var img_html = "<div class='isImg'><img src='" + objUrl + "' style='height: 100%; width: 100%;' /><button class='removeBtn' οnclick='javascript:removeImg(" + index + ")'>x</button></div>";
img_div.append(img_html);
//异步转换
blobToBase64(filesList[index],function(res){
base64.push(res);
})
}
}
function closeShade(){
$(".shade").fadeOut(500);
}
function closeShadeImg(){
$(".shadeImg").fadeOut(500);
}
</script>
</html>