我在一个网站,其中包括一个博客类型的部分工作。我有一个发布系统,其中来自编辑器的输入被发送到mysql数据库表。到目前为止,除了添加本Map像外,其他一切都正常。如果图像的文件大小非常小,它就可以工作,否则它不会显示,有时会清除$\u post['body]中的所有内容。有没有一种方法可以放大图像?
以下是php:
<?php
if(isset($_POST['title'], $_POST['body'])) {
include 'php/mysql.php';
date_default_timezone_set('America/New_York');
$title = filter_input(INPUT_POST, 'title', FILTER_SANITIZE_STRING);
$body = $_POST['body'];
$date = date('Y/m/d');
$query = "INSERT INTO posts(title,body,date)
VALUES('$title','$body','$date')";
$insert = runQuery($query,$conn);
if(!$insert) die($conn->error);
redirect('News.php');
}
?>
<form id="get-data-form" method="post">
<table>
<tr>
<td><label for="title">Title</label></td>
<td><input name="title" id="title" /></td>
</tr>
<tr>
<td valign="top"><label for="body">Body</label></td>
<td><textarea name="body" class="tinymce" id="body">
</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Post" /></td>
</tr>
</table>
</form>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script>
下面是我为tinymce编写的js代码:
tinymce.init({
/* replace textarea having class .tinymce with tinymce editor */
selector: "textarea.tinymce",
/* force_p_newlines : false,
force_br_newlines : true, */
/* theme of the editor */
theme: "modern",
skin: "lightgray",
/* width and height of the editor */
width: "100%",
height: 300,
/* display statusbar */
statubar: true,
/* plugin */
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
/* toolbar */
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
/* enable title field in the Image dialog */
image_title: true,
/* enable automatic uplaods of images represented by blob or data URIs */
automatic_uploads: true,
/* add custom file picker only to image dialog */
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
// call the callback and populate the Title field with the file name
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
});
3条答案
按热度按时间zlhcx6iw1#
tinymce已经有了一种方法来处理插入本地映像并将其发送到服务器:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
如果您在编辑器上配置此选项
init()
编辑器的图像将自动神奇地上传给你处理时,它插入。这将达到您的最终目标的形象是在一个服务器和服务器上src
属性只指向图像,而不是在html内容中有大的base64图像。envsm3lx2#
我面临同样的问题,通过将列类型从text改为longtext来解决
ddrv8njm3#
与其将图像保存在数据库中,不如将其保存为文件夹中的文件。根据tinymce文档,有两种方法可以在服务器中上传图像。
使用
uploadImages()
表格提交前功能-
uploadImages()
-将所有上传到编辑器的图片,逐一发送到images_upload_url
通过post方法,将该图像的scr属性设置为包含location属性的json对象。服务器应该返回类似json的
设置为发布图像的src属性。上传图片
images_upload_handler
如果您要使用自定义逻辑的自己的方法,则使用它。upload handler函数有三个参数:blobInfo
,一个success
回拨,以及failure
回拨。它在编辑器中上载图像时触发,并通过xmlhttprequest发送图像,并使用远程图像的位置调用成功回调。