版权声明:俗世凡人行(释) QQ:748507607 https://blog.csdn.net/weixin_41887155/article/details/88647190
form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多文件上传</title>
<style>
.main{
width:500px;
height:500px;
border:1px solid black;
margin:0 auto;
margin-top: 28px;
/*text-align: center;*/
}
#public{
width: 98%;
height: 200px;
border: 1px solid green;
margin: 0 auto;
margin-top: 48px;
}
#public .pic{
width: 160px;
height: 160px;
border: 1px solid #eee;
float: left;
margin: 0 auto;
margin-top:20px;
}
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
</style>
</head>
<body>
<div class="main">
<div id="public">
</div>
<div id="common">
<input type="file" name="file" id="uploadFile" style="display:none">
</div>
<div id='bntUp' style="width:100px;margin-top:28px;height:60px;line-hight:60px;border:1px solid blue;margin:0 auto;margin-top:60px;text-align:center;">
上传图片
</div>
<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
</div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$(function(){
//删除图片
$("body").on("dblclick",".pic",function(){
$(this).remove();
})
//单文件上传
// $("#uploadFile").change(function(){
// var pic =$(this).get(0).files[0];
// var jsonPost = new FormData();
// jsonPost.append('file',pic); //图片
// jsonPost.append('_token',$('#token').val());//跨站攻击
// $.ajax({
// url: "{:U('upload')}",
// type: 'POST',
// dataType: 'json',
// processData: false,
// contentType: false,
// data: jsonPost,//{'file': pic}
// })
// .done(function(ret) {
// console.log("success");
// })
// });
//出发多文件上传
$("body").on("change","#uploadFile",function(){
//$("#uploadFile").change(function(){
var pic =$(this).get(0).files[0];
var jsonPost = new FormData();
jsonPost.append('file',pic);
jsonPost.append('_token',$('#token').val());
$.ajax({
url: "{:U('upload')}",
type: 'POST',
dataType: 'json',
processData: false,
contentType: false,
data: jsonPost,//{'file': pic},
})
.done(function(ret) {
if(ret.status=='success'){
alert('上传完成!');
var data ="<div class='pic'><img src='"+ret.img+"'/></div>";
$("#public").prepend(data);
$('#uploadFile').remove();
var bnt = "<input type=\"file\" name=\"file\" id=\"uploadFile\" style=\"display:none\">";
// $("#common").html(bnt);
}else{
alert('请重试!');
}
console.log("success");
});
});
$("#bntUp").click(function(event) {
//点击这出发上传功能
$("#uploadFile").click();
});
});
</script>
</body>
</html>
后端
<?php
public function upload()
{
if(IS_POST)
{
$file = $_FILES['file'];//接收文件
$tmpname = $file['tmp_name']; //文件临时存储路径名
$filename = $file['name']; //文件名
$fileurl = "./Public/uploads/"; //移动到路径
if(is_uploaded_file($tmpname)){ //临时文件存在
$mvd = move_uploaded_file($tmpname,$fileurl.$filename); //移动到自定义的位置
if(!$mvd){
$result = ["status"=>"error","img"=>"上传失败"];
echo json_encode($result);
}else
{
$result = ["status"=>"success","img"=>$fileurl.$filename];
echo json_encode($result);
}
}
}else
{
$this->display();
}
}
}
?>