kindeditor4.1.1的批量图片上传没有浏览按钮
时间: 2023-11-01 21:03:01 浏览: 67
kindeditor4.1.1的批量图片上传功能没有浏览按钮是因为该版本的KindEditor采用了基于HTML5的文件拖拽上传方式。在使用批量图片上传功能时,用户可以直接将需要上传的图片文件拖拽到编辑器内,从而实现批量上传图片的操作。
相对于传统的浏览按钮,文件拖拽上传方式更加方便快捷,同时也提升了用户的体验。用户只需将需要上传的图片文件从本地文件夹中拖拽到编辑器内,系统会自动将文件上传至指定位置。这种方式不仅操作简单,还能避免了传统浏览按钮的点击操作步骤,提高了用户的效率。
当然,需要注意的是,文件拖拽上传方式基于HTML5技术实现,因此在使用该功能时,需要保证浏览器支持HTML5。如果使用的浏览器不支持HTML5,可能会导致文件拖拽上传功能无法正常使用。
总之,kindeditor4.1.1的批量图片上传功能没有浏览按钮是因为采用了文件拖拽上传方式,这种方式在操作上更加便捷,提高了用户的体验和效率。
相关问题
为什么kindeditor多图上传没有上传按钮
KindEditor是一个基于JavaScript构建的富文本编辑器,它在多图上传时没有“上传”按钮是因为它采用了一种更加便捷和直观的图片上传方式。
在KindEditor中,多图上传采用拖拽文件的方式,即用户可以将要上传的图片直接从文件夹中拖放到编辑器中的图片上传区域。这种方式能够方便用户快速上传多张图片,避免了传统的选择文件、点击上传按钮等繁琐的操作。
当用户将图片拖放到上传区域时,KindEditor会自动将图片上传至指定的服务器,并在上传完成后自动将图片插入到编辑器中的合适位置。这样一来,用户在编辑文本时,只需要将图片文件拖放到适当位置即可,大大简化了图片上传的过程,提高了用户的编辑效率。
KindEditor没有上传按钮的设计也符合现代网页设计的潮流,以简洁、直观为主导,提供更好的用户体验。它遵循了“less is more”的设计理念,将不必要的按钮和操作去除,使编辑器的界面更加清爽和简洁。
总而言之,KindEditor在多图上传中没有上传按钮是为了提供更加便捷和直观的操作方式,并且符合现代网页设计的潮流。用户可以通过拖拽文件的方式将图片上传,大大简化了图片上传的过程,提高了用户的使用体验。
tp5框架中kindeditor富文本编辑器批量上传图片
1. 首先,在 `application\extra` 目录下新建一个 `config.php` 文件,添加以下配置:
```php
<?php
return [
'upload_path' => '/uploads/', //上传文件保存的路径
'upload_exts' => 'gif,jpg,jpeg,png,bmp', //允许上传的文件类型
];
```
2. 在 `application\index\controller` 目录下新建一个 `Upload.php` 控制器,添加以下代码:
```php
<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
class Upload extends Controller
{
public function uploadImage()
{
$file = request()->file('imgFile');
$info = $file->validate(['ext' => config('upload_exts')])->move(ROOT_PATH . 'public' . config('upload_path'));
if ($info) {
$image_url = config('upload_path') . $info->getSaveName();
return json(['error' => 0, 'url' => $image_url]);
} else {
return json(['error' => 1, 'message' => $file->getError()]);
}
}
}
```
3. 在 `application\index\view` 目录下新建一个 `upload_image.html` 文件,添加以下代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
<form action="<?php echo url('upload/uploadImage'); ?>" enctype="multipart/form-data" method="post">
<input type="file" name="imgFile">
<input type="submit" value="上传">
</form>
</body>
</html>
```
4. 修改 `kindeditor` 配置文件 `public\static\kindeditor\config.js`,添加以下代码:
```javascript
//上传图片配置
imageUploadJson = '<?php echo url("upload/uploadImage"); ?>';
```
5. 在 `public\static\kindeditor\plugins` 目录下新建一个 `image.php` 文件,添加以下代码:
```php
<?php
//获取上传文件保存的路径
$save_path = $_SERVER['DOCUMENT_ROOT'] . $_POST['save_path'];
//获取要上传的文件
$file = $_FILES['imgFile'];
//上传文件
if (move_uploaded_file($file['tmp_name'], $save_path . $file['name'])) {
$image_url = $_POST['base_url'] . $_POST['save_path'] . $file['name'];
//返回上传结果
echo json_encode(['error' => 0, 'url' => $image_url]);
} else {
echo json_encode(['error' => 1, 'message' => '上传失败']);
}
```
6. 修改 `kindeditor` 的 `php` 上传文件处理程序 `public\static\kindeditor\php\upload_json.php`,添加以下代码:
```php
//获取要保存的文件路径和文件名
$save_path = $_SERVER['DOCUMENT_ROOT'] . $_POST['save_path'];
$file_name = uniqid() . strrchr($_FILES['imgFile']['name'], '.');
//上传文件
if (move_uploaded_file($_FILES['imgFile']['tmp_name'], $save_path . $file_name)) {
$image_url = $_POST['base_url'] . $_POST['save_path'] . $file_name;
//返回上传结果
echo json_encode(['error' => 0, 'url' => $image_url]);
} else {
echo json_encode(['error' => 1, 'message' => '上传失败']);
}
```
7. 在浏览器中访问 `http://localhost/index/upload_image.html`,上传一张图片测试。如果上传成功,会返回图片的 URL 地址。在 `kindeditor` 中也可以正常上传图片了。