版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28761593/article/details/86615876
jq是网上链接的,thinkphp5是控制器里写的，不足之处多多指教 不用submit直接按钮上传
话不多说直接上代码
1.静态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<style>
/** 清除内外边距 **/
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
/* structural elements 结构元素 */
dl,
dt,
dd,
ul,
ol,
li,
/* list elements 列表元素 */
pre,
/* text formatting elements 文本格式元素 */
form,
fieldset,
legend,
button,
input,
textarea,
/* form elements 表单元素 */
th,
td
/* table elements 表格元素 */
{
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,
button,
input,
select,
textarea
/* for ie */
{
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
address,
cite,
dfn,
em,
var {
font-style: normal;
}
/* 将斜体扶正 */
code,
kbd,
pre,
samp {
font-family: courier new, courier, monospace;
}
/* 统一等宽字体 */
small {
font-size: 12px;
}
/* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul,
ol {
list-style: none;
}
/** 重置文本格式元素 **/
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/** 重置表单元素 **/
legend {
color: #000;
}
/* for ie6 */
fieldset,
img {
border: 0;
}
/* img 搭车：让链接里的 img 无边框 */
button,
input,
select,
textarea {
font-size: 100%;
}
/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 清除浮动 */
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.tyb-upload {
width: 100%;
height: auto;
}
.tyb-upload li {
width: 150px;
height: 150px;
float: left;
box-sizing: border-box;
position: relative;
}
.tyb-upload li img{
width: 100%;
height: 100%;
}
.tyb-upload li:hover{
box-shadow: 0px 0px 5px 0px #464444;
}
.tyb-upload .upload {
cursor: pointer;
}
.tyb-upload .upload div {
position: relative;
width: 100%;
height: 100%;
line-height: 150px;
font-size: 80px;
background: #d0d0d0;
color: #fff;
overflow: hidden;
text-align: center;
}
.tyb-upload li .butimg{
display: none;
}
.tyb-upload li:hover .butimg{
display: block;
}
.tyb-upload .upload div span {
cursor: pointer;
}
.tyb-upload .upload input {
position: absolute;
left: 0px;
right: 0px;
opacity: 0;
width: 100%;
height: 100%;
}
.tyb-upload li .butimg{
position: absolute;
left: 0px;
top: 0px;
text-align: center;
width: 100%;
margin-top: 70px;
}
.tyb-upload li .butimg span{
cursor: pointer;
margin-right: 5px;
}
</style>
<ul class="tyb-upload" id='tyb-upload'>
<li class="upload">
<div>
<span>+</span>
<input id="files" type="file" name="file[]" multiple />
<input type="hidden" id="files-button" />
</div>
</li>
</ul>
<script type="text/javascript">
var imgData = [];
$(function() {
$("#files-button").on("click",function(){
var file = $("#files")[0].files; //获取指定ID的文件信息
for(var i = 0; i < file.length; i++) {
imfs(file[i])
}
this.value = '';
});
$("#files").on("change",function(){
$("#files-button").trigger("click");
})
});
function imfs(file) {
var formData = new FormData(); //创建FormData对象，将所需的信息封装到内部，以键值对的方式
formData.append("file", file); //参数封装格式,可以是文件，亦可以是普通的字符串
$.ajax({
type: "post",
url: 'http://localhost:1125/index/upload/uploadFels',
type: "post",
data: formData,
contentType: false,
dataType : "json",
processData: false,
success: function(res) {
if(res.status == 200){
imgData.push(res.url);
var url = "'"+res.url+"'";
$('#tyb-upload').prepend('<li >'+
'<div class="butimg">'+
'<span onclick="lookimg(this)">查看</span>'+
'<span onclick="deleteimg(this)">删除</span>'+
'</div>'+
'<img src="' +res.url+ '" />'+
'</li>');
}
},
complete: function(resa) {
console.log("提交前");
}
});
}
//删除方法
function deleteimg(e){
var p_div = e.parentNode;
var p_img = $(p_div).next();
var parentNode = p_div.parentNode;
var url = p_img[0].src;
$.post("http://localhost:1125/index/upload/delfile",{url:url},function(res){
if(res.status == 200){
for (var i in imgData) {
if(imgData[i] == url){
delete imgData[i];
parentNode.remove();
}
}
}
},'json')
}
//查看放大
function lookimg(e){
var p_div = e.parentNode;
var p_img = $(p_div).next();
var url = p_img[0].src;
window.open(url,"_blank");
}
</script>
</body>
</html>
2.后台thinkphp
public function uploadFels(){
$file = request()->file('file');
if($file){
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
$sql = $info->getSaveName();
$avator=str_replace('\\','/',$sql);
$dk = substr($_SERVER['HTTP_HOST'],-4);
$sql = "http://localhost:".$dk."/uploads/".$avator;
echo json_encode(['url'=>$sql,'status'=>200]);
}else{
echo json_encode(['url'=>null,'status'=>400]);
}
}
}
public function delfile(){
$info_del = input('post.url');
$result = substr($info_del,strripos($info_del,"uploads"));
if($result){
$myFile = $result;
is_file($myFile) && unlink($myFile);
echo json_encode(['msg'=>'删除成功','status'=>200]);
}
}
3.效果图
点击删除
