网上有很多simditor这个编辑器的文档,但是大多是重复的,并且php做服务端的也很少。最近做了一个上传功能,研究了一下,跟大家分享一下。
首先 说一下逻辑,理解好了逻辑,才能更好的理解代码。
点击上传本地图片,然后在编辑器中会出现一张图片,但是这张图片是base64格式的,直接存储对数据库会造成很大影响。
所以,在你的配置下,编辑器在选择好图片之后,会触发一个上传图片的事件,用于我们把这个图片上传到服务器。
我们上传成功后,返回图片地址,然后编辑器在成功之后会将图片路径替换掉原先的base64的图片。
以上就是 一般 编辑器上传图片的逻辑。下面 我们举一个实例。
// 初始化富文本编辑器
var editor = new Simditor({
textarea: $('#container'),
allowTags:['br', 'span', 'a', 'img', 'b'],
imageButton: ['upload'],
upload:{
url:upload_url, //这里是你的php接口地址 这个以下的其他参数其实不需要考虑,不影响功能
params: null,
fileKey: 'file',
connectionCount: 3,
leaveConfirm: '正在上传文件..'
}
});
这里做好了还需要一步,要在图片的input里面添加name,在simditor.js中搜索accept="image/*",然后添加name name="file"
上面这步做好了之后,在你点击上传本地图片的时候,就会发送一个请求,在浏览器调试中 可以看到,然后 只需要在php中 跟正常的上传图片功能一样操作就可以。
我这里的代码是我使用的两个方法:
// 上传封面
public function uploadimage()
{
// 调用common_helper中的文件上传方法
$info = upload_file('/uploads_cdn/record/');
$info['file'] = $this->config->config['base_url'].$info['file'];
echo json_encode($info);
exit;
}
// 基础方法 上传普通文档
function upload_file($targetFolder = null){
$tempFile = $_FILES['filename']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$fileParts = pathinfo($_FILES['filename']['name']);
$extension = $fileParts['extension'];
$name = get_rand() . '.' . $extension;
$targetFile = rtrim($targetPath,'/') . '/'. $name;
move_uploaded_file($tempFile,$targetFile);
$data['size'] = abs(filesize($targetFile));
$data['file'] = $targetFolder . $name;
$data['tmp_name'] = $fileParts['filename'];
return $data;
}
这里是返回值:
file:"/xxxxxxxx/xxxxxxx.jpg" //图片保存的路径
size:5139 //图片大小
tmp_name:"1_lumengabc" //图片上传前的名称
这里我们只需要第一个file参数,当然参数的字段名 你是可以自定义的,你可以在php代码中做修改。
既然已经得到了图片的地址,下面我们只需要将data:image格式的图片替换成现在的图片地址就可以,
替换的位置,我是直接修改的simditor.js,搜索‘uploadsuccess’,得到代码:
this.editor.uploader.on('uploadsuccess', function(e, file, result) {
var $img, $mask, msg;
if (!file.inline) {
return;
}
$img = file.img;
$img.removeData('file');
$img.removeClass('uploading');
$mask = $img.data('mask');
if ($mask) {
$mask.remove();
}
$img.removeData('mask');
if (result.success === false) {
msg = result.msg || '上传被拒绝了';
if ((typeof simple !== "undefined" && simple !== null) && (simple.message != null)) {
simple.message({
content: msg
});
} else {
alert(msg);
}
$img.attr('src', _this.defaultImage);
} else {
$img.attr('src', result.file); //这里就是成功后的替换,将这个改成了我们所使用的字段名file
}
修改后完成,大家可以看看效果了。