php上传图片代码编辑,simditor上传本地图片 php

网上有很多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

}

修改后完成，大家可以看看效果了。