網(wǎng)上有很多simditor這個編輯器的文檔，但是大多是重復(fù)的，并且php做服務(wù)端的也很少。最近做了一個上傳功能，研究了一下，跟大家分享一下。

首先 說一下邏輯，理解好了邏輯，才能更好的理解代碼。

點(diǎn)擊上傳本地圖片，然后在編輯器中會出現(xiàn)一張圖片，但是這張圖片是base64格式的，直接存儲對數(shù)據(jù)庫會造成很大影響。

所以，在你的配置下，編輯器在選擇好圖片之后，會觸發(fā)一個上傳圖片的事件，用于我們把這個圖片上傳到服務(wù)器。

我們上傳成功后，返回圖片地址，然后編輯器在成功之后會將圖片路徑替換掉原先的base64的圖片。

以上就是 一般 編輯器上傳圖片的邏輯。下面 我們舉一個實(shí)例。

// 初始化富文本編輯器

var editor = new Simditor({

textarea: $('#container'),

allowTags:['br', 'span', 'a', 'img', 'b'],

imageButton: ['upload'],

upload:{

url:upload_url, //這里是你的php接口地址 這個以下的其他參數(shù)其實(shí)不需要考慮，不影響功能

params: null,

fileKey: 'file',

connectionCount: 3,

leaveConfirm: '正在上傳文件..'

}

});

這里做好了還需要一步，要在圖片的input里面添加name，在simditor.js中搜索accept="image/*"，然后添加name name="file"

上面這步做好了之后，在你點(diǎn)擊上傳本地圖片的時候，就會發(fā)送一個請求，在瀏覽器調(diào)試中 可以看到，然后 只需要在php中 跟正常的上傳圖片功能一樣操作就可以。

我這里的代碼是我使用的兩個方法:

// 上傳封面

public function uploadimage()

{

// 調(diào)用common_helper中的文件上傳方法

$info = upload_file('/uploads_cdn/record/');

$info['file'] = $this->config->config['base_url'].$info['file'];

echo json_encode($info);

exit;

}

// 基礎(chǔ)方法 上傳普通文檔

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參數(shù)，當(dāng)然參數(shù)的字段名 你是可以自定義的，你可以在php代碼中做修改。

既然已經(jīng)得到了圖片的地址，下面我們只需要將data:image格式的圖片替換成現(xiàn)在的圖片地址就可以，

替換的位置，我是直接修改的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

}

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

總結(jié)

以上是生活随笔為你收集整理的php上传图片代码编辑,simditor上传本地图片 php的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。