我正在尝试使用Froala所提供的所见即所得编辑器上传图片到我的本地主机(用于测试目的),但是它没有起作用。当我选择要上传的图像时,它会在编辑器中变暗,然后在我单击其他区域时消失。以下是我的代码和我尝试遵循的链接其文档。
文档: https://www.froala.com/wysiwyg-editor/docs/concepts/image/upload
还有这个方法,但我不知道该把PHP放到哪里:https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload
我的代码
(“fedit”是我用于textarea的类。)
Javascript:
<script>
$(function() {
$('.fedit').froalaEditor({
// Set the image upload parameter.
imageUploadParam: 'file',
// Set the image upload URL.
imageUploadURL: '/upload_image.php',
// Additional upload params.
imageUploadParams: {class: 'fedit'},
// Set request type.
imageUploadMethod: 'POST',
// Set max image size to 5MB.
imageMaxSize: 5 * 1024 * 1024,
// Allow to upload PNG and JPG.
imageAllowedTypes: ['jpeg', 'jpg', 'png']
})
.on('froalaEditor.image.beforeUpload', function (e, editor, images) {
// Return false if you want to stop the image upload.
})
.on('froalaEditor.image.uploaded', function (e, editor, response) {
// Image was uploaded to the server.
})
.on('froalaEditor.image.inserted', function (e, editor, $img, response) {
// Image was inserted in the editor.
})
.on('froalaEditor.image.replaced', function (e, editor, $img, response) {
// Image was replaced in the editor.
})
.on('froalaEditor.image.error', function (e, editor, error, response) {
// Bad link.
else if (error.code == 1) { ... }
// No link in upload response.
else if (error.code == 2) { ... }
// Error during image upload.
else if (error.code == 3) { ... }
// Parsing response failed.
else if (error.code == 4) { ... }
// Image too text-large.
else if (error.code == 5) { ... }
// Invalid image type.
else if (error.code == 6) { ... }
// Image can be uploaded only to same domain in IE 8 and IE 9.
else if (error.code == 7) { ... }
// Response contains the original server response to the request if available.
});
});
</script>
upload_image.php
<?php
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png", "blob");
// Get filename.
$temp = explode(".", $_FILES["file"]["name"]);
// Get extension.
$extension = end($temp);
// An image check is being done in the editor but it is best to
// check that again on the server side.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);
if ((($mime == "image/gif")
|| ($mime == "image/jpeg")
|| ($mime == "image/pjpeg")
|| ($mime == "image/x-png")
|| ($mime == "image/png"))
&& in_array(strtolower($extension), $allowedExts)) {
// Generate new random name.
$name = sha1(microtime()) . "." . $extension;
// Save file in the uploads folder.
move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/ " . $name);
// Generate response.
$response = new StdClass;
$response->link = "/uploads/" . $name;
echo stripslashes(json_encode($response));
}
?>