功能介绍:
文件上传. 可 一次选择单文件, 多文件, 支持预览, 编辑好后, 一次性上传到服务器, 可追加操作, 已经上传到服务的也可以展示和操作
屏幕截图 2022-09-23 102711.jpg
删除文件
已上传到服务器(注:保存提交后才上传)的, 请求远程删除文件, 删除页面内容,
选择文件,但未上传保存的, 直接删除
image.png
话不多说, 直接上代码
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>showImages</title>
<style type="text/css">
.float{
float: left;
width : 200px;
height: 200px;
overflow: hidden;
border: 1px solid #CCCCCC;
border-radius: 10px;
padding: 5px;
margin: 5px;
}
.float2{
float: left;
width : 200px;
height: 200px;
overflow: hidden;
border: 1px solid #CCCCCC;
border-radius: 10px;
padding: 5px;
margin: 5px;
}
.fater{
padding: 2px;
}
img{
position: relative;
}
#file_input{
display: none;
}
.delete{
width: 200px;
height:200px;
position: absolute;
text-align: center;
line-height: 200px;
z-index: 10;
font-size: 30px;
background-color: rgba(255,255,255,0.8);
color: #777;
opacity: 0;
transition-duration: 0.7s;
-webkit-transition-duration: 0.7s;
padding: 20px;
}
.delete:hover{
cursor: pointer;
opacity: 1;
}
button{
cursor: pointer;
line-height: 34px;
padding: 0 20px;
color: #fff;
background: #0095DD;
border-radius: 5px;
margin:0 9px ;
}
#images{
border: 1px solid #ddd;
margin-top: 10px;
min-height: 200px;
}
.float2 img{
width: 200px;
height: 200px;
}
#images2{
margin-top: 10px;
/* margin-left: 100px; */
min-height: 200px;
}
.container{
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
/* justify-content: space-evenly; */
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var input = document.getElementById("file_input");
var result;
var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
var oSelect = document.getElementById("select");
var oAdd = document.getElementById("add");
var oSubmit = document.getElementById("submit");
var oInput = document.getElementById("file_input");
if(typeof FileReader==='undefined'){
alert("抱歉，你的浏览器不支持 FileReader");
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}//handler
function readFile(){
var iLen = this.files.length;
for(var i=0;i<iLen;i++){
if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){//判断上传文件格式
return alert("上传的图片格式不正确，请重新选择");
};
var reader = new FileReader();
reader.readAsDataURL(this.files[i]); //转成base64
reader.fileName = this.files[i].name;
dataArr.push({i})
reader.onload = function(e){
result = '<div class="delete">delete</div><div ><img class="float2" src="'+this.result+'" alt="'+this.fileName+'"/></div>';
var div = document.createElement('div');
div.innerHTML = result;
div['className'] = 'fater';
// document.getElementsByTagName('body')[0].appendChild(div); //插入dom树
document.getElementById("images").appendChild(div); //插入dom树
var img = div.getElementsByTagName('img')[0];
img.onload = function(){
var nowHeight = ReSizePic(this); //设置图片大小
this.parentNode.style.display = 'block';
var oParent = this.parentNode;
if(nowHeight){
oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';
}
}
div.onclick = function(){
$(this).remove(); // 在页面中删除该图片元素
}
}
}
}
oSelect.onclick=function(){
oInput.value = ""; // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
//清空已选图片
$('.float').remove();
oInput.click();
}
oAdd.onclick=function(){
oInput.value = ""; // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
oInput.click();
}
oSubmit.onclick=function(){
if(!dataArr.length){
return alert('请先选择文件');
}
$('#form2').ajaxSubmit(function(data){
layer.closeAll();
console.log(data);
if(data.code){
layer.msg(data.msg,{},function(){
location.href="{:url('index',['auth_id'=>input('auth_id')])}"
})
}else{
layer.msg(data.msg);
}
})
}
}
function ReSizePic(ThisPic) {
var RePicWidth = 200; //这里修改为您想显示的宽度值
var TrueWidth = ThisPic.width; //图片实际宽度
var TrueHeight = ThisPic.height; //图片实际高度
if(TrueWidth>TrueHeight){
//宽大于高
var reWidth = RePicWidth;
ThisPic.width = reWidth;
//垂直居中
var nowHeight = TrueHeight * (reWidth/TrueWidth);
return nowHeight; //将图片修改后的高度返回，供垂直居中用
}else{
//宽小于高
var reHeight = RePicWidth;
ThisPic.height = reHeight;
}
}
function del_data(id,_this)
{
// 删除远端文件, 这里使用了layer.js 控件, 不喜欢的可以去掉
// 附远端地址 https://gitee.com/layui/layer/blob/master/dist/layer.js
layer.confirm('该图片已上传，确定要删除吗?',function(index){
$.post("{:url('photo/img_del')}",{id:id},function(data){
if(data.code)
{
layer.msg(data.msg,{},function(){
_this.remove();
// location.reload();
});
}else{
layer.msg(data.msg);
}
})
})
}
</script>
</head>
<body>
<div class="topSidebar cl">
<a href="javascript:;">{$page_name}</a>
<i class="fr" onclick="location.reload()">刷新</i>
</div>
<div class="public-form case content ">
<div >
<label>请选择一个图像文件：</label>
<button id="select">(重新)选择图片</button>
<button id="add">(追加)图片</button>
</div>
<div class="container" id="images">
{if condition="isset($info) and count($info)>0"}
{volist name="info" id="val"}
<div class="fater" onclick="del_data('{$val.id}',$(this))">
<div class="delete">delete</div>
<div >
<!-- <span class="del" onclick="del_data('{$val.id}',0)">X</span> -->
<img class="float2" src="{$val['image_path']}">
</div>
</div>
{/volist}
{/if}
</div>
<div class="public-btn" id="submit">提交</div>
<form action="{:url('photo/uploads')}" method="post" enctype="multipart/form-data" id="form2">
<input type="hidden" name="id" value="{$id}">
<input type="file" name="up_img[]" id="file_input" style="display:none" multiple="multiple"> <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->
</form>
</div>
</body>
</html>
后端代码(伪代码)
public function uploads(){
if (empty($this->file)) {
$this->file = isset($_FILES) ? $_FILES : [];
}
//后台代码随便写就行
//保存返回成功即可
$data = ['code'=>1,'msg'=>'保存成功'];
return $data;
}
后端的代码就随意了, 自己写下吧, 嘿嘿
喜欢的点赞收藏, 感谢
