Php 在MVC项目中使用ajax进行图像预览
我正在制作一个博客网站,我可以使用tinymce的richtext编辑器将图像上传到该网站,但图像预览不会显示在文本区域中。(尽管如果我上传图片,我可以在blogfeed中完全看到它) 我怀疑我如何将tinymce实现到MVC框架(brad traversy在udemy上的框架)中存在问题。因为当我查看图像的文件路径时,它们是不同的Php 在MVC项目中使用ajax进行图像预览,php,ajax,tinymce,Php,Ajax,Tinymce,我正在制作一个博客网站,我可以使用tinymce的richtext编辑器将图像上传到该网站,但图像预览不会显示在文本区域中。(尽管如果我上传图片,我可以在blogfeed中完全看到它) 我怀疑我如何将tinymce实现到MVC框架(brad traversy在udemy上的框架)中存在问题。因为当我查看图像的文件路径时,它们是不同的 ”。(来自blogfeed的图像) ”(tinymce编辑器中的图像) 由于某些原因,在将图像加载到tinymce编辑器时,控制器被包括在内。我尝试过搞乱图像应该保
”
。(来自blogfeed的图像)
”(tinymce编辑器中的图像)
由于某些原因,在将图像加载到tinymce编辑器时,控制器被包括在内。我尝试过搞乱图像应该保存的位置,如果我将其设置为$imageFolder=“images/”;
,那么我可以在blogfeed中看到图像,但不能预览。如果我设置$imageFolder=“../images>/";
然后图像可以在预览中看到,但不能在blogfeed中看到
我还尝试定义一个常量路径,“define(“IMGROOT”,“path/to/my/site”),然后设置$imageFolder=IMGROOT'内容/图像”;
但后来我遇到了“不允许加载本地资源”的错误,我不太想回避这个问题,因为这可能是我的博客发布后不加载本地资源的一个很好的理由
upload.php:
<?php
//upload images
header('Content-Type: application/json');
/***************************************************
* Only these origins are allowed to upload images *
***************************************************/
$accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");
/*********************************************
* Change this line to set the upload folder *
*********************************************/
$imageFolder = "images/";
$temp = current($_FILES);
// Accept upload if there was no origin, or if it is an accepted origin
$filetowrite = $imageFolder . $temp['name'];
move_uploaded_file($temp['tmp_name'], $filetowrite);
// Respond to the successful upload with JSON.
// Use a location key to specify the path to the saved image resource.
// { location : '/your/uploaded/image/file'}
echo json_encode(array('location' => $filetowrite));
我通过向tinymce init添加一个基本url来修复它。这样,它会忽略我从MVC教程中获得的路由,只加载指定文件夹中的任何图片。我还添加了3行,我还不完全确定它们做了什么,但它们对文件路径做了一些操作
注意,我在config.php文件夹中定义了常量,所以“URLROOT”被定义为“http:localhost/mywebsite”
tinymce.init({
选择器:“#tinymcebody”,
插件:“图像”,
文档库url:“”,
相对URL:false,
删除\u脚本\u主机:false,
转换URL:false,
图片上传url:'/upload.php',
图像上传处理程序:函数(blobInfo、成功、失败){
var-xhr;
var格式数据;
tinymce.init({
selector: '#tinymcebody',
plugins: "image",
images_upload_url: '<?php echo URLROOT;?>/upload.php',
images_upload_handler: function (blobInfo, success, failure) {
var xhr;
var formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '<?php echo URLROOT;?>/upload.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Ereror: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
console.log(formData);
xhr.send(formData);
}
});
tinymce.init({
selector: '#tinymcebody',
plugins: "image",
document_base_url : "<?php echo URLROOT; ?>",
relative_urls : false,
remove_script_host : false,
convert_urls : false,
images_upload_url: '<?php echo URLROOT;?>/upload.php',
images_upload_handler: function (blobInfo, success, failure) {
var xhr;
var formData;