不知道我在干什么的,看我上一篇文章:Ajax和OSS文件上传、删除
就是昨天想的解决方案,今天去尝试了一下,顺便把代码贴在这里。
首先是前台代码部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="tests" action="?" method="post" enctype="multipart/form-data">
<div>
<input type="hidden" value="">
<input type="file">
<button type="button">上传图片</button>
<span style="display: none">删除图片</span>
<a href="" data-lightbox="lightbox-test" style="display: none;">查看图片</a><br>
</div>
<div>
<input type="hidden" value="">
<input type="file">
<button type="button">上传图片</button>
<span style="display: none">删除图片</span>
<a href="" data-lightbox="lightbox-test" style="display: none;">查看图片</a><br>
</div>
</form>
<script src="/Public/JS/dist/js/jquery-3.1.0.min.js"></script>
<script src="/Public/JS/lightbox.js"></script>
<script type="text/javascript">
var pre="//这里换成你自己oss服务器的endpoint/";
$("button").click(function () {
var formData=new FormData();
// $("input[type='file']").each(function (index,element) {
// formData.append("oss_file[]",element.files[0]);
// });
var __this=$(this);
var oldImageURL=$(this).prevAll("input[type='hidden']").val();
formData.append("oss_fike",$(this).prev().get(0).files[0]);
formData.append("oldImageURL",oldImageURL);
var url="{:U('Index/index')}";
$.ajax({
url: url,
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
__this.next("span").css("display","inline");
__this.prevAll("input[type='hidden']").val(data);
var new_href=data.substring(0,32);
__this.nextAll("a").attr("href",pre+new_href);
__this.nextAll("a").css("display","inline");
alert("上传成功");
},
error: function () {
alert("error");
}
});
});
$("span").click(function () {
var url="{:U('Index/delImage')}";
var img_url=$(this).prevAll("input[type='hidden']").val();
var __this=$(this);
$.get(url,{"object":img_url},function (data) {
if(data.code=="2001"){
__this.next().css("display","none");
__this.css("display","none");
alert(data.msg);
}else{
alert(data.msg);
}
});
});
</script>
</body>
</html>
然后是后台部分:
<?php
namespace Home\Controller;
use Think\Controller;
use Vendor\OSS\Image;
class IndexController extends Controller
{
function __construct()
{
if(!session('key')){
session('key',uniqid());
}
parent::__construct();
}
public function index()
{
if(IS_POST){
$image=new \Vendor\OSS\Image();
$key=array_keys($_FILES)[0];
$oldImageURL=I("post.oldImageURL");
if($oldImageURL!=""){
$object=$this->checkImage($oldImageURL);
if($object){
$image->delImg($object);
}
}
$object=$image->uploadImg("Goods/",$_FILES[$key]);
$extra=md5($object.session("key"));
$this->ajaxReturn($object.$extra);
}
$this->display();
}
public function delImage(){
$unchecked=I("get.object");
$object=$this->checkImage($unchecked);
if($object){
$image=new Image();
$image->delImg($object);
$this->ajaxReturn(array("code"=>2001,"msg"=>"删除成功"));
}else{
$this->ajaxReturn(array("code"=>2002,"msg"=>"删除失败"));
}
}
public function checkImage($unchecked){
$object=substr($unchecked,0,32);
$key=substr($unchecked,32,strlen($unchecked)-32);
if(md5($object.session("key"))==$key){
return $object;
}else{
return false;
}
}
}
?>
实现起来超级简单的!虽然不是什么很专业的加密方式,但是对于我这种菜鸡来说已经很有成就感了!!!知足常乐嘛,我会慢慢进步的!