WebUploaderSupport
WebUploaderSupport copied to clipboard
joker-pper
用了一下感觉挺好的 但是删除怎么用的实在用不来请问如何实现后端用PHP
我在上传完成之后的加载服务器文件展示页面删除可以 但是我如何在上传文件之后的预览页面删除文件 此时我看到图片的url是base64的 我如何获取服务器文件的url去删除
我在上传完成之后的加载服务器文件展示页面删除可以 但是我如何在上传文件之后的预览页面删除文件 此时我看到图片的url是base64的 我如何获取服务器文件的url去删除 上传成功后接口返回要删除的url相关信息就好了呢
我贴一下我的代码你帮我看一下（后台是ThinkPHP5框架）。我现在能上传，但是删除只能删除我在后台数据库中读取的图片，我想要的效果是：我在上传图片成功后，我又想删除图片此时图片还是预览图，并不是从数据库中读取的图片url，我该如何写，如果你不太理解我的需求，麻烦留个联系方式我加您请教一下。
前端js
var w1 = new WebUploaderSupport({
server: "{:url('admin/course/upload')}"
,swf: '__JS__/plugins/webuploader/Uploader.swf' // swf文件所处路径
,accept: {
title: 'all',
extensions: '*',
mimeTypes: '*'
}
,support: {
uploader: ".uploader.uploader1",
serverFiles: [
//此处的图片如果是从后台数据库读取的图片信息能正常删除，但是刚上传之后不刷新时候的预览图无法删除服务器的图片 {"src":"/uploads/file/image/20181219101239QQ图片20181026162751.png","name":"1.jpg","attrs":{"data-server-file":true,"data-delete-url":"/uploads/file/image/20181219101239QQ图片20181026162751.png"}}
],
fileSize: 6,
/**
* 删除服务端文件(依赖于getIsServerFile的判断结果)的业务操作,可根据实际覆盖重写(support配置中直接重写该函数即可)
* @param $item
* @param deleteServerFileCallback
*/
deleteServerFile: function($item, url, deleteServerFileCallback) {
var self = this;
var data = {'path':url};
$.ajax({
dataType: "json",
type: "post",
url: "{:url('deleteFile')}",
data:data,
success: function (json) {
deleteServerFileCallback(self, $item, json); //通过callback执行业务操作
//文件操作完成后重新加载选择按钮样式
self.loadChooseFileBtnStyle();
}
});
},
/**
* deleteServerFile 响应成功时的回调处理,可根据实际覆盖重写
* @param self 当前support对象
* @param $item
* @param data
*/
deleteServerFileCallback: function (self, $item, data) {
if(data.status) {
self.removeFileItem($item);
}
alert(data.content);
}
}
});
后台上传代码
public function upload()
{
$file = request()->file('file');
$name = date('YmdHis') . $file->getInfo()['name'];
//上传成功保存原来文件名
$info = $file->move(ROOT_PATH . "public/uploads/file/image", $name);
$path = "/uploads/file/image/" . $info->getSaveName();
if ($info) {
return json_encode(
['status' => 1,
'attrs' => [
'data-server-file' => $info->getSaveName(),
'data-delete-url' => $path]]
);
} else {
// 上传失败获取错误信息
return json_encode(['status' => 1,
'attrs' => [
'data-server-file' => $info->getSaveName(),
'data-delete-url' => $path]]);
}
}
后台删除代码
public function deleteFile()
{
$data = input();
$path = ROOT_PATH . 'public' . $data['path'];
$result = @unlink($path);
if ($result) {
return (['status' => 1, 'content' => '删除成功']);
} else {
// 上传失败获取错误信息
return (['status' => 0, 'content' => '删除失败']);
}
}
//此处的图片如果是从后台数据库读取的图片信息能正常删除，但是刚上传之后不
uploadSuccessCallbck 可以设置上传图片后返回数据的一些属性之类的,默认没有重新更改预览图的地址和效果,不过返回的attrs数据都会和服务端文件一样设置到对应的地方,用于删除